CSS-variabloj

Bootstrap inkluzivas ĉirkaŭ du dekduojn de CSS-propraj propraĵoj (variabloj) en sia kompilita CSS, kun dekduoj pli survoje por plibonigita personigo laŭ po-komponenta bazo. Ĉ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-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));
}

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