variabel CSS

Bootstrap ngawengku kira-kira dua belasan sipat custom CSS (variabel) dina CSS na disusun, kalawan puluhan deui dina jalan pikeun kustomisasi ningkat dina dasar per-komponén. Ieu nyadiakeun aksés gampang kana nilai nu ilahar dipake kawas warna tema urang, titik putus, jeung tumpukan font primér nalika digawé di inspektur browser anjeun, sandbox kode, atawa prototyping umum.

Sadaya sipat adat urang diawalan kubs- pikeun nyegah konflik sareng CSS pihak katilu.

Variabel akar

Ieu mangrupikeun variabel anu kami kalebet (perhatikeun yén :rootdiperyogikeun) anu tiasa diaksés dimana waé CSS Bootstrap dimuat. Éta aya dina file kami _root.scsssareng kalebet dina file dist anu disusun 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 komponén

Kami ogé mimiti ngagunakeun sipat khusus salaku variabel lokal pikeun sababaraha komponén. Ku cara ieu urang tiasa ngirangan CSS anu dikompilasi, mastikeun gaya teu diwariskeun di tempat-tempat sapertos tabel nested, sareng ngamungkinkeun sababaraha restyling dasar sareng ngalegaan komponén Bootstrap saatos kompilasi Sass.

Tingali kana dokuméntasi méja kami pikeun sababaraha wawasan kumaha urang ngagunakeun variabel CSS .

Kami ogé nganggo variabel CSS dina grids kami — utamina pikeun talang — kalayan langkung seueur panggunaan komponén anu bakal datang.

Contona

Variabel CSS nawiskeun kalenturan anu sami sareng variabel Sass, tapi tanpa peryogi kompilasi sateuacan dilayanan ka browser. Contona, di dieu urang ngareset font kaca urang jeung gaya link kalawan variabel CSS.

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