CSS-variabloj
Uzu la CSS kutimajn propraĵoj de Bootstrap por rapida kaj antaŭvida dezajno kaj disvolviĝo.
Bootstrap inkluzivas multajn CSS-proprajn ecojn (variablojn) en sia kompilita CSS por realtempa personigo sen neceso rekompili Sass. Ĉi tiuj havigas facilan aliron al kutime uzataj valoroj kiel niaj etoskoloroj, rompopunktoj kaj primaraj tiparaj stakoj kiam vi laboras en la inspektisto de via retumilo, koda sablokesto aŭ ĝenerala prototipado.
Ĉiuj niaj kutimaj propraĵoj estas antaŭfiksitajbs- por eviti konfliktojn kun triaj CSS.
Radikaj variabloj
Jen la variabloj, kiujn ni inkluzivas (notu, ke la :rootestas bezonata), alireblaj ie ajn la CSS de Bootstrap estas ŝarĝita. Ili troviĝas en nia _root.scssdosiero kaj inkluzivitaj en niaj kompilitaj dist dosieroj.
: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;
}
Komponantaj variabloj
Ni ankaŭ komencas uzi kutimajn ecojn kiel lokajn variablojn por diversaj komponantoj. Tiel ni povas redukti nian kompilitan CSS, certigi ke stiloj ne estas hereditaj en lokoj kiel nestitaj tabeloj, kaj permesi iun bazan resttigon kaj etendon de Bootstrap-komponentoj post Sass-kompilo.
Rigardu nian tabeldokumentaron por iom da kompreno pri kiel ni uzas CSS-variablojn .
Ni ankaŭ uzas CSS-variablojn tra niaj kradoj—ĉefe por defluiloj—kun pli da uzado de komponantoj estonte.
Ekzemploj
CSS-variabloj ofertas similan flekseblecon al la variabloj de Sass, sed sen la bezono de kompilo antaŭ esti servataj al la retumilo. Ekzemple, ĉi tie ni restarigas la tiparon kaj ligilstilojn de nia paĝo kun CSS-variabloj.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Kradaj rompopunktoj
Dum ni inkluzivas niajn kradromppunktojn kiel CSS-variablojn (krom xs), konsciu, ke CSS-variabloj ne funkcias en amaskomunikilaj demandoj . Ĉi tio estas laŭ dezajno en la CSS-specifo por variabloj, sed eble ŝanĝiĝos en venontaj jaroj kun subteno por env()variabloj. Rigardu ĉi tiun Stack Overflow-respondon por iuj helpemaj ligiloj. Dume, vi povas uzi ĉi tiujn variablojn en aliaj CSS-situacioj, same kiel en via JavaScript.