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

Bootstrap Sass'ты кайра компиляциялоону талап кылбастан реалдуу убакытта ыңгайлаштыруу үчүн түзүлгөн 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-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'иңизде колдоно аласыз.