CSS nisqa tikraqkuna

Bootstrap yaqa iskay chunka CSS sapanchasqa propiedades (variables) huñusqa CSS kaqninpi churan, chunkakuna aswan ñanpi allinchasqa ruwanapaq sapa componente kaqpi. Kaykunaqa sapa kuti llamk'achisqa chanikunaman mana sasa yaykuyta qunku imaynachus tema llimp'iyku, pakikunayku chaymanta ñawpaq letra pilakuna llamk'achkanki maskaqniyki qhawaqpi, huk código rit'i caja kaqpi utaq prototipo general kaqpi.

Llapan sapanchasqa propiedadesniyku ñawpaqchasqa kankubs- mana kimsa kaq CSS kaqwan ch'aqwaykunata ruwanapaq.

Saphi tikraqkuna

Kaypi tikraqkuna churasqayku (qhaway chaymanta chay :rootmañasqa kachkan) chaymanta maypipas Bootstrap kaqpa CSS kargasqa kachkan chayman yaykuyta atikun. Paykunaqa willañiqiykupi tarikunku _root.scsschaymanta huñusqa dist willañiqiykupi churasqa.

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

Componente nisqa variables nisqakuna

Hinallataq, sapanchasqa propiedades kaqmanta ruwayta qallarichkayku imaymana componentes kaqpaq local variables hina. Kayhina huñusqa CSSniyku pisiyachiyta atiykuman, estilokuna mana herenciayuq kasqankuta qhawayta atiykuman kitikunapi anidado tablakuna hina, chaymanta wakin sapsi wakmanta ruwayta chaymanta Bootstrap componentekuna mast'ariyta Sass huñusqamanta qhipaman saqiyta atiyku.

Tabla qillqaykupi qhaway wakin qhawaypaq imayna CSS tikraqkunata llamk'achisqaykumanta .

Hinallataq CSS tikraqkunata tukuy rejillaykupi llamk'achkayku —ñawpaqta canales kaqpaq— aswan componente llamk'achiyta hamuq pachapi hamuqwan.

Ejemplos

CSS tikraqkuna Sass tikraqkunaman rikch'aq flexibilidadta qun, ichaqa mana huñusqa necesidadniyuq manaraq maskaqman sirwisqa kachkaptin. Ejemplopaq, kaypi p'anqaykupa letranta chaymanta t'inki estilokunata CSS tikraqkunawan musuqmanta churachkayku.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}