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-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", 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));
  --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;
}

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

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 önümüzdeki yıllarda değişkenler için destek ile 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'inizde olduğu kadar diğer CSS durumlarında da kullanabilirsiniz.