CSS kintamieji

„ Bootstrap“ į savo sudarytą CSS įtraukia daug tinkintų CSS ypatybių (kintamųjų) , kad būtų galima tinkinti realiuoju laiku, nereikia iš naujo kompiliuoti „Sass“. 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-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", 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));
  --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;
}

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

Tinklelio lūžio taškai

Nors tinklelio lūžio taškus įtraukiame kaip CSS kintamuosius (išskyrus xs), atminkite, kad CSS kintamieji neveikia medijos užklausose . Tai numatyta CSS specifikacijose kintamiesiems, tačiau ateinančiais metais gali pasikeisti, kai bus palaikomi env()kintamieji. Peržiūrėkite šį „Stack Overflow“ atsakymą , kad gautumėte keletą naudingų nuorodų. Tuo tarpu šiuos kintamuosius galite naudoti kitose CSS situacijose, taip pat savo „JavaScript“.