CSS nisqa tikraqkuna

Bootstrap achka CSS sapanchasqa propiedades (variables) huñusqa CSS kaqninpi chiqa pacha ruwanapaq mana Sass kaqmanta huñunapaq necesidadniyuq. 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-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;
}

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

Puntos de ruptura de rejilla

Sichus rejilla p'akisqaykukunata CSS tikraq hina churayku (mana xs), yachay CSS tikraq mana llamk'ankuchu willay mast'ariy tapuykunapi . Kayqa CSS spec kaqpi tikraqkunapaq ruwaywan kachkan, ichaqa hamuq watakunapi tikrakunman env()tikraqkunapaq yanapakuywan. Kay Pila Desbordamiento kutichiyta qhaway wakin yanapakuq t'inkikuna kaqpaq. Chaykama, kay tikraqkunata wak CSS situacionkunapi llamk'achiy atikunki, chaymanta JavaScript kaqpi.