pembolehubah CSS

Bootstrap menyertakan banyak sifat tersuai CSS (pembolehubah) dalam CSS terkumpulnya untuk penyesuaian masa nyata tanpa perlu menyusun semula Sass. Ini memberikan akses mudah kepada nilai yang biasa digunakan seperti warna tema, titik putus dan susunan fon utama kami apabila bekerja dalam pemeriksa penyemak imbas anda, kotak pasir kod atau prototaip umum.

Semua sifat tersuai kami diawali denganbs- untuk mengelakkan konflik dengan CSS pihak ketiga.

Pembolehubah akar

Berikut ialah pembolehubah yang kami sertakan (perhatikan bahawa :rootdiperlukan) yang boleh diakses di mana-mana sahaja CSS Bootstrap dimuatkan. Ia terletak dalam _root.scssfail kami dan disertakan dalam fail dist terkumpul kami.

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

Pembolehubah komponen

Kami juga mula menggunakan sifat tersuai sebagai pembolehubah setempat untuk pelbagai komponen. Dengan cara ini kami boleh mengurangkan CSS terkumpul kami, memastikan gaya tidak diwarisi di tempat seperti jadual bersarang dan membenarkan beberapa penggayaan semula asas dan lanjutan komponen Bootstrap selepas kompilasi Sass.

Sila lihat dokumentasi jadual kami untuk mendapatkan sedikit pandangan tentang cara kami menggunakan pembolehubah CSS .

Kami juga menggunakan pembolehubah CSS merentas grid kami—terutamanya untuk longkang—dengan lebih banyak penggunaan komponen akan datang pada masa hadapan.

Contoh

Pembolehubah CSS menawarkan fleksibiliti yang serupa dengan pembolehubah Sass, tetapi tanpa memerlukan kompilasi sebelum disampaikan kepada penyemak imbas. Sebagai contoh, di sini kami menetapkan semula gaya fon dan pautan halaman kami dengan pembolehubah CSS.

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

Titik putus grid

Walaupun kami memasukkan titik putus grid kami sebagai pembolehubah CSS (kecuali untuk xs), maklum bahawa pembolehubah CSS tidak berfungsi dalam pertanyaan media . Ini adalah dengan reka bentuk dalam spesifikasi CSS untuk pembolehubah, tetapi mungkin berubah pada tahun-tahun akan datang dengan sokongan untuk env()pembolehubah. Lihat jawapan Stack Overflow ini untuk beberapa pautan yang berguna. Sementara itu, anda boleh menggunakan pembolehubah ini dalam situasi CSS lain, serta dalam JavaScript anda.