CSS kintamieji

„ Bootstrap“ savo sudarytoje CSS apima maždaug dvi dešimtis tinkintų CSS ypatybių (kintamųjų) , o dar dešimtys ruošiama patobulinti kiekvieno komponento tinkinimą. Tai suteikia lengvą prieigą prie dažniausiai naudojamų reikšmių, pvz., temų spalvų, pertraukos taškų ir pagrindinių šriftų krūvų, kai dirbate su naršyklės inspektoriumi, kodo smėlio dėže ar kuriant bendrą prototipą.

Visos mūsų tinkintos ypatybės yra su priešdėliu,bs- kad būtų išvengta konfliktų su trečiosios šalies CSS.

Šakniniai kintamieji

Čia yra mūsų įtraukti kintamieji (atkreipkite dėmesį, kad :roottai būtina), kuriuos galima pasiekti bet kur, kur įkeliamas Bootstrap CSS. Jie yra mūsų _root.scssfaile ir įtraukti į mūsų sudarytus dist failus.

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

Komponentų kintamieji

Taip pat pradedame naudoti tinkintas ypatybes kaip vietinius įvairių komponentų kintamuosius. Tokiu būdu galime sumažinti savo sukompiliuotą CSS, užtikrinti, kad stiliai nebūtų paveldimi tokiose vietose, kaip įdėtosios lentelės, ir leisti atlikti pagrindinį Bootstrap komponentų stilių ir išplėsti po Sass kompiliavimo.

Peržiūrėkite mūsų lentelės dokumentus, kad sužinotumėte, kaip naudojame CSS kintamuosius .

Mes taip pat naudojame CSS kintamuosius savo tinklelyje, visų pirma latakams, o ateityje komponentai bus naudojami daugiau.

Pavyzdžiai

CSS kintamieji siūlo panašų lankstumą kaip ir Sass kintamieji, tačiau nereikia jų kompiliuoti prieš pateikiant juos naršyklei. Pavyzdžiui, čia mes iš naujo nustatome savo puslapio šriftą ir nuorodų stilius naudodami CSS kintamuosius.

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