CSS değişkenleri

Bootstrap, Sass'ı yeniden derlemeye gerek kalmadan gerçek zamanlı özelleştirme için derlenmiş CSS'sinde birçok CSS özel özelliği (değişken) içerir. Bunlar, tarayıcınızın denetçisinde, bir kod sanal alanında veya genel prototiplemede çalışırken tema renklerimiz, kesme noktalarımız ve birincil yazı tipi yığınlarımız gibi yaygın olarak kullanılan değerlere kolay erişim sağlar.

bs-Üçüncü taraf CSS ile çakışmaları önlemek için tüm özel özelliklerimizde ön ek bulunur .

Kök değişkenler

:rootBootstrap'in CSS'sinin yüklendiği her yerden erişilebilen değişkenler (gerekli olduğunu unutmayın ). Dosyamızda bulunurlar _root.scssve derlenmiş dist dosyalarımıza dahil edilirler.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Bileşen değişkenleri

Bootstrap 5, çeşitli bileşenler için yerel değişkenler olarak özel özellikleri giderek daha fazla kullanıyor. Bu şekilde derlenmiş CSS'mizi azaltır, stillerin iç içe tablolar gibi yerlerde miras alınmamasını sağlar ve Sass derlemesinden sonra Bootstrap bileşenlerinin bazı temel yeniden biçimlendirilmesine ve genişletilmesine izin veririz.

CSS değişkenlerini nasıl kullandığımıza dair bazı bilgiler için tablo belgelerimize göz atın . Gezinme çubuklarımız ayrıca v5.2.0'dan itibaren CSS değişkenlerini de kullanır . Ayrıca ızgaralarımızda CSS değişkenleri kullanıyoruz (öncelikle yeni tercih edilen CSS ızgarasındaki oluklar için ) gelecekte daha fazla bileşen kullanımı gelecek.

Mümkün olduğunda, temel bileşen düzeyinde CSS değişkenleri atayacağız (örneğin, .navbargezinme çubuğu ve alt bileşenleri için). Bu, nerede ve nasıl özelleştirileceğine dair tahminleri azaltır ve gelecekteki güncellemelerde ekibimiz tarafından kolay değişiklikler yapılmasına olanak tanır.

Önek

Çoğu CSS değişkeni, kendi kod tabanınızla çarpışmaları önlemek için bir önek kullanır. --Bu önek, her CSS değişkeninde gerekli olana ektir .

$prefixSass değişkeni aracılığıyla öneki özelleştirin . Varsayılan olarak, bs-(sondaki tireye dikkat edin) olarak ayarlanmıştır.

Örnekler

CSS değişkenleri, Sass'ın değişkenlerine benzer bir esneklik sunar, ancak tarayıcıya sunulmadan önce derlemeye gerek yoktur. Örneğin, burada sayfamızın yazı tipini ve bağlantı stillerini CSS değişkenleriyle sıfırlıyoruz.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

Izgara kesme noktaları

Izgara kesme noktalarımızı CSS değişkenleri olarak eklesek de ( dışında xs), CSS değişkenlerinin medya sorgularında çalışmadığını unutmayın . Bu, değişkenler için CSS spesifikasyonunda tasarım gereğidir, ancak değişkenler için destekle gelecek yıllarda env()değişebilir. Bazı yararlı bağlantılar için bu Yığın Taşması yanıtına göz atın . Bu arada, bu değişkenleri JavaScript'inizin yanı sıra diğer CSS durumlarında da kullanabilirsiniz.