CSS өзгөрмөлөрү

Bootstrap Sass'ты кайра компиляциялоону талап кылбастан реалдуу убакытта ыңгайлаштыруу үчүн түзүлгөн CSS ичинде көптөгөн CSS ыңгайлаштырылган касиеттерин (өзгөрмөлөрдү) камтыйт. Булар браузериңиздин инспекторунда, коддун кум чөйрөсүндө же жалпы прототипте иштөөдө тема түстөрүбүз, үзгүлтүккө учуроо чекиттерибиз жана негизги шрифт стектери сыяктуу кеңири колдонулган баалуулуктарга оңой жетүүнү камсыз кылат.

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

Түпкү өзгөрмөлөр

Бул жерде биз Bootstrap CSS жүктөлгөн каалаган жерден кирүүгө боло турган өзгөрмөлөр ( :rootталап кылынарын эске алыңыз). Алар биздин _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);
}

Тор үзүү чекиттери

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