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

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

Безнең барлык характеристикалар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-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);
}