variabel CSS

Bootstrap kalebu udakara rong lusin properti khusus CSS (variabel) ing CSS sing dikompilasi, kanthi puluhan liyane ing dalan kanggo kustomisasi sing luwih apik ing basis saben komponen. Iki nyedhiyakake akses gampang menyang nilai sing umum digunakake kaya warna tema, titik istirahat, lan tumpukan font utama nalika nggarap inspektur browser, kothak wedhi kode, utawa prototipe umum.

Kabeh sifat khusus kita diawali karobs- kanggo ngindhari konflik karo CSS pihak katelu.

Variabel root

Mangkene variabel sing kalebu (cathetan yen :rootdibutuhake) sing bisa diakses ing ngendi wae CSS Bootstrap dimuat. Dheweke ana ing file kita _root.scsslan kalebu ing file dist sing dikompilasi.

: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

Kita uga wiwit nggunakake properti khusus minangka variabel lokal kanggo macem-macem komponen. Kanthi cara iki, kita bisa nyuda CSS sing dikompilasi, mesthekake gaya ora diwarisake ing papan kaya tabel bersarang, lan ngidini sawetara restyling dhasar lan nambah komponen Bootstrap sawise kompilasi Sass.

Deleng dokumentasi tabel kita kanggo sawetara wawasan babagan carane kita nggunakake variabel CSS .

Kita uga nggunakake variabel CSS ing grids kita - utamane kanggo talang - kanthi panggunaan komponen luwih akeh ing mangsa ngarep.

Tuladha

Variabel CSS nawakake keluwesan sing padha karo variabel Sass, nanging tanpa perlu kompilasi sadurunge dilayani menyang browser. Contone, ing kene kita ngreset gaya font lan pranala kaca kita nganggo variabel CSS.

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