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

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

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

CSS айнымалы мәндерін қалай қолданатынымызды түсіну үшін кесте құжаттамамызды қараңыз .

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

Мысалдар

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

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

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

While we include our grid breakpoints as CSS variables (except for xs), be aware that CSS variables do not work in media queries. This is by design in the CSS spec for variables, but may change in coming years with support for env() variables. Check out this Stack Overflow answer for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.