CSS айнымалылары

Bootstrap Sass-ті қайта құрастыруды қажет етпестен нақты уақытта теңшеу үшін құрастырылған CSS-де көптеген CSS теңшелетін сипаттарды (айнымалыларды) қамтиды. Бұл шолғыштың инспекторында, код құм жәшігінде немесе жалпы прототипте жұмыс істегенде тақырып түстері, тоқтау нүктелері және негізгі қаріп стектері сияқты жиі қолданылатын мәндерге оңай қол жеткізуді қамтамасыз етеді.

Біздің барлық реттелетін сипаттарымызbs- үшінші тарап CSS-мен қайшылықтарды болдырмау үшін префикспен берілген.

Түбір айнымалылар

:rootМұнда біз Bootstrap CSS жүктелген кез келген жерден қол жеткізуге болатын айнымалы мәндерді қосамыз (қажет екенін ескеріңіз ). Олар біздің _root.scssфайлда орналасқан және біздің құрастырылған дист файлдарымызға енгізілген.

: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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Құрамдас айнымалылар

Bootstrap 5 әр түрлі құрамдас бөліктерге арналған жергілікті айнымалылар ретінде реттелетін сипаттарды көбірек пайдаланады. Осылайша біз құрастырылған CSS-ті азайтамыз, стильдердің кірістірілген кестелер сияқты жерлерде мұраланбауын қамтамасыз етеміз және Sass компиляциясынан кейін Bootstrap құрамдастарының кейбір негізгі рестайлингіне және кеңейтілуіне мүмкіндік береміз.

CSS айнымалы мәндерін қалай қолданатынымызды түсіну үшін кесте құжаттамамызды қараңыз . Біздің шарлау тақталары v5.2.0 нұсқасы бойынша CSS айнымалы мәндерін де пайдаланады . Біз сондай-ақ торларымызда CSS айнымалы мәндерін қолданамыз, ең алдымен, жаңа қосылған CSS торын ағындылар үшін — болашақта көбірек құрамдас пайдалану болады.

Мүмкіндігінше, біз негізгі құрамдас деңгейінде CSS айнымалы мәндерін тағайындаймыз (мысалы, .navbarшарлау тақтасы және оның қосалқы құрамдастары үшін). Бұл қай жерде және қалай теңшеу керектігін болжауды азайтады және болашақ жаңартуларда командамызға оңай өзгертулер енгізуге мүмкіндік береді.

Префикс

Көптеген CSS айнымалылары жеке код базасымен соқтығысуды болдырмау үшін префиксті пайдаланады. Бұл префикс --әрбір CSS айнымалысында талап етілетінге қосымша болып табылады.

$prefixSass айнымалысы арқылы префиксті теңшеңіз . Әдепкі бойынша ол bs-(соңғы сызықшаға назар аударыңыз) орнатылған.

Мысалдар

CSS айнымалылары Sass айнымалыларына ұқсас икемділікті ұсынады, бірақ браузерге қызмет көрсету алдында компиляция қажет емес. Мысалы, мұнда біз CSS айнымалылары бар беттің қаріпі мен сілтеме мәнерлерін қалпына келтіреміз.

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

Тордың тоқтау нүктелері

Тордың тоқтау нүктелерін CSS айнымалылары ретінде қосқанымызбен ( -дан басқа xs), CSS айнымалылары медиа сұрауларында жұмыс істемейтінін ескеріңіз . Бұл айнымалыларға арналған CSS спецификациясының дизайны бойынша жасалған, бірақ айнымалыларға қолдау көрсету арқылы келесі жылдары өзгеруі мүмкін env(). Кейбір пайдалы сілтемелер үшін осы Stack Overflow жауабын қараңыз . Осы уақытта сіз бұл айнымалы мәндерді басқа CSS жағдайларында, сондай-ақ JavaScript-те пайдалана аласыз.