variabel CSS

Bootstrap menyertakan banyak properti kustom (variabel) CSS dalam CSS yang dikompilasi untuk penyesuaian waktu nyata tanpa perlu mengkompilasi ulang Sass. Ini memberikan akses mudah ke nilai yang umum digunakan seperti warna tema, titik putus, dan tumpukan font utama saat bekerja di inspektur browser, kotak pasir kode, atau pembuatan prototipe umum.

Semua properti kustom kami diawali denganbs- untuk menghindari konflik dengan CSS pihak ketiga.

Variabel akar

Berikut adalah variabel yang kami sertakan (perhatikan bahwa :rootini diperlukan) yang dapat diakses di mana saja CSS Bootstrap dimuat. Mereka berada di _root.scssfile kami dan termasuk dalam file dist terkompilasi 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;
}

Variabel komponen

Kami juga mulai menggunakan properti khusus sebagai variabel lokal untuk berbagai komponen. Dengan cara ini kita dapat mengurangi CSS yang dikompilasi, memastikan gaya tidak diwariskan di tempat-tempat seperti tabel bersarang, dan mengizinkan beberapa penataan ulang dasar dan perluasan komponen Bootstrap setelah kompilasi Sass.

Lihat dokumentasi tabel kami untuk beberapa wawasan tentang bagaimana kami menggunakan variabel CSS .

Kami juga menggunakan variabel CSS di seluruh grid kami—terutama untuk talang—dengan lebih banyak penggunaan komponen di masa mendatang.

Contoh

Variabel CSS menawarkan fleksibilitas yang mirip dengan variabel Sass, tetapi tanpa perlu kompilasi sebelum disajikan ke browser. Misalnya, di sini kita mengatur ulang font halaman dan gaya tautan dengan variabel CSS.

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

Titik putus jaringan

Meskipun kami menyertakan breakpoint grid kami sebagai variabel CSS (kecuali untuk xs), perlu diketahui bahwa variabel CSS tidak berfungsi di kueri media . Ini dirancang dalam spesifikasi CSS untuk variabel, tetapi dapat berubah di tahun-tahun mendatang dengan dukungan untuk env()variabel. Lihat jawaban Stack Overflow ini untuk beberapa tautan bermanfaat. Sementara itu, Anda dapat menggunakan variabel-variabel ini dalam situasi CSS lain, serta dalam JavaScript Anda.