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

Komponentų kintamieji

„Bootstrap 5“ vis dažniau naudoja pasirinktines ypatybes kaip vietinius įvairių komponentų kintamuosius. Tokiu būdu sumažiname savo sudarytą CSS, užtikriname, kad stiliai nebūtų paveldimi tokiose vietose, kaip įdėtosios lentelės, ir leidžiame kai kuriuos pagrindinius Bootstrap komponentų stilių ir išplėtimą po Sass kompiliavimo.

Peržiūrėkite mūsų lentelės dokumentus, kad sužinotumėte, kaip naudojame CSS kintamuosius . Mūsų naršymo juostose taip pat naudojami CSS kintamieji nuo 5.2.0 versijos. Mes taip pat naudojame CSS kintamuosius savo tinklelyje – visų pirma latakams, naujam pasirenkamam CSS tinkleliui – ateityje bus naudojamas daugiau komponentų.

Kai tik įmanoma, CSS kintamuosius priskirsime pagrindinio komponento lygiu (pvz., .navbarnaršymo juostai ir jos antriniams komponentams). Tai sumažina spėliones, kur ir kaip tinkinti, o mūsų komanda gali lengvai atlikti pakeitimus būsimuose atnaujinimuose.

Priešdėlis

Dauguma CSS kintamųjų naudoja priešdėlį, kad išvengtų susidūrimų su jūsų pačių kodų baze. Šis priešdėlis yra papildomas prie --kiekvieno CSS kintamojo reikalaujamo priešdėlio.

Tinkinkite priešdėlį naudodami $prefixSass kintamąjį. Pagal numatytuosius nustatymus jis nustatytas į bs-(atkreipkite dėmesį į galinį brūkšnį).

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“.