CSS premenné
Použite vlastné vlastnosti CSS Bootstrapu pre rýchly a perspektívny dizajn a vývoj.
Bootstrap obsahuje mnoho vlastných vlastností CSS (premenných) vo svojom kompilovanom CSS na prispôsobenie v reálnom čase bez potreby prekompilovať Sass. Poskytujú jednoduchý prístup k bežne používaným hodnotám, ako sú farby motívov, body prerušenia a zásobníky primárnych písiem pri práci v inšpektorovi prehliadača, v karanténe kódu alebo pri všeobecnom prototypovaní.
Všetky naše vlastné vlastnosti majú predponubs- , aby sa predišlo konfliktom s CSS tretej strany.
Koreňové premenné
Tu sú premenné, ktoré zahŕňame (všimnite si, že :rootje to povinné), ku ktorým je možné pristupovať kdekoľvek, kde je načítaný CSS Bootstrap. Sú umiestnené v našom _root.scsssúbore a zahrnuté v našich kompilovaných dist súboroch.
: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;
}
Komponentné premenné
Začíname tiež využívať vlastné vlastnosti ako lokálne premenné pre rôzne komponenty. Týmto spôsobom môžeme zredukovať naše skompilované CSS, zabezpečiť, aby sa štýly nededili na miestach, ako sú vnorené tabuľky, a umožniť základné preštylovanie a rozšírenie komponentov Bootstrap po kompilácii Sass.
Pozrite si našu dokumentáciu k tabuľke, kde nájdete prehľad o tom, ako používame premenné CSS .
Používame aj premenné CSS v našich mriežkach – predovšetkým pre odkvapy – s ďalším využívaním komponentov v budúcnosti.
Príklady
Premenné CSS ponúkajú podobnú flexibilitu ako premenné Sass, ale bez potreby kompilácie pred ich doručením do prehliadača. Tu napríklad obnovujeme písmo a štýly odkazov našej stránky pomocou premenných CSS.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Prerušovacie body mriežky
Aj keď zarážky mriežky zahŕňame ako premenné CSS (okrem premenných xs), uvedomte si, že premenné CSS nefungujú v mediálnych dopytoch . Toto je zámerné v špecifikácii CSS pre premenné, ale v nasledujúcich rokoch sa môže zmeniť s podporou env()premenných. Pozrite si túto odpoveď Stack Overflow , kde nájdete niekoľko užitočných odkazov. Medzitým môžete tieto premenné použiť v iných situáciách CSS, ako aj vo svojom JavaScripte.