variabel CSS

Bootstrap mencakup sekitar dua lusin properti kustom (variabel) CSS dalam CSS yang dikompilasi, dengan lusinan lainnya dalam proses penyesuaian yang ditingkatkan berdasarkan per komponen. 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-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));
}

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