CSS değişkenleri

Bootstrap, derlenmiş CSS'sinde yaklaşık iki düzine CSS özel özelliği (değişken) içerir ve bileşen bazında daha iyi özelleştirme için düzinelerce daha yolda. 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-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --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-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", 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));
}

Bileşen değişkenleri

Ayrıca, çeşitli bileşenler için yerel değişkenler olarak özel özellikleri kullanmaya başlıyoruz. Bu şekilde, derlenmiş CSS'mizi azaltabilir, stillerin iç içe tablolar gibi yerlerde miras alınmamasını sağlayabilir ve Sass derlemesinden sonra Bootstrap bileşenlerinin bazı temel yeniden biçimlendirilmesine ve genişletilmesine izin verebiliriz.

CSS değişkenlerini nasıl kullandığımıza dair bazı bilgiler için tablo belgelerimize göz atın .

Ayrıca gelecekte daha fazla bileşen kullanımıyla birlikte ızgaralarımızda (öncelikle oluklar için) CSS değişkenleri kullanıyoruz.

Ö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);
}