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

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

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

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

Бул жерде биз Bootstrap CSS жүктөлгөн каалаган жерден кирүүгө боло турган өзгөрмөлөр ( :rootталап кылынарын эске алыңыз). Алар биздин _root.scssфайлда жайгашкан жана биздин компиляцияланган dist файлдарыбызга киргизилген.

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

Компоненттик өзгөрмөлөр

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

CSS өзгөрмөлөрүн кантип колдонуп жатканыбызды түшүнүү үчүн биздин таблицанын документтерин караңыз .

Биз ошондой эле CSS өзгөрмөлөрүн торлорубузда колдонуп жатабыз, биринчи кезекте, арыктар үчүн, келечекте дагы көп компоненттер колдонулушу мүмкүн.

Мисалдар

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

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