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-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та куллана аласыз.