variabel CSS

Bootstrap nyakup akeh properti khusus (variabel) CSS ing CSS sing dikompilasi kanggo kustomisasi wektu nyata tanpa perlu nglumpukake maneh Sass. 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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Variabel komponen

Bootstrap 5 tambah akeh nggunakake properti khusus minangka variabel lokal kanggo macem-macem komponen. Kanthi cara iki, kita 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 . Navbar kita uga nggunakake variabel CSS ing v5.2.0. Kita uga nggunakake variabel CSS ing grid kita-utamane kanggo saluran opt-in CSS grid anyar- karo panggunaan komponen luwih akeh ing mangsa ngarep.

Yen bisa, kita bakal nemtokake variabel CSS ing tingkat komponen dhasar (contone, .navbarkanggo navbar lan sub-komponen). Iki nyuda guess ing ngendi lan carane ngatur, lan ngidini kanggo modifikasi gampang dening tim kita ing mangsa nganyari.

Ater-ater

Umume variabel CSS nggunakake awalan supaya ora tabrakan karo basis kode sampeyan dhewe. Ater-ater iki minangka tambahan kanggo --sing dibutuhake ing saben variabel CSS.

Kustomisasi awalan liwat $prefixvariabel Sass. Kanthi gawan, disetel menyang bs-(cathetan garis mburi).

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

Grid breakpoints

Nalika kita nyakup breakpoints kothak minangka variabel CSS (kajaba xs), weruh yen variabel CSS ora bisa digunakake ing pitakon media . Iki dirancang ing spek CSS kanggo variabel, nanging bisa uga owah ing taun-taun sing bakal teka kanthi dhukungan kanggo env()variabel. Priksa jawaban Stack Overflow iki kanggo sawetara pranala sing migunani. Ing sawetoro wektu, sampeyan bisa nggunakake variabel kasebut ing kahanan CSS liyane, uga ing JavaScript sampeyan.