CSS үзгәрүчәннәре

Тиз һәм алга таба дизайн һәм үсеш өчен Bootstrap'ның CSS махсус үзенчәлекләрен кулланыгыз.

Бу биттә

Bootstrap күпчелек CSS махсус үзлекләрен (үзгәрүчәннәрне) тупланган CSS эчендә реаль вакытта көйләү өчен Sass-ны компиляцияләүдән башка кертә. Бу безнең браузер инспекторында эшләгәндә, тема төсләре, нокталар, төп шрифт стеклары кебек еш кулланыла торган кыйммәтләргә җиңел керү мөмкинлеген бирә.

Безнең барлык характеристикалар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 үзгәрүченең таләпләренә өстәмә.

$prefixПрефиксны Sass үзгәрүчесе аша көйләгез . Килешү буенча, ул куелган 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та куллана аласыз.