CSS üýtgeýjileri

“Bootstrap ”, düzülen CSS-de takmynan iki sany CSS aýratyn häsiýetini (üýtgeýjini) öz içine alýar, her komponent esasynda özleşdirmegi gowulandyrmak üçin ýene-de onlarça ýol bar. Bular, brauzeriňiziň inspektorynda, kod sandyk gutusynda ýa-da umumy prototip görnüşinde işleýän wagtyňyz, mowzuk reňklerimiz, bölek nokatlarymyz we esasy şrift ýazgylary ýaly giňden ulanylýan bahalara aňsat girýär.

bs-Customhli adaty häsiýetlerimiz, üçünji tarap CSS bilen gapma-garşylyklardan gaça durmak üçin goşulýar .

Kök üýtgeýjiler

:root“Bootstrap” -yň CSS-i ýüklenen islendik ýere girip boljak üýtgeýänler (zerurdygyny belläň ). Olar biziň _root.scssfaýlymyzda ýerleşýär we düzülen dist faýllarymyza girýär.

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

Komponent üýtgeýjileri

Şeýle hem, dürli komponentler üçin ýerli üýtgeýjiler hökmünde aýratyn häsiýetleri ulanyp başlaýarys. Şeýlelik bilen, düzülen CSS-larymyzy azaldyp bileris, stilleriň höwürtgelenen stollar ýaly ýerlerde miras galmazlygyny üpjün edip bileris we Sass düzülenden soň Bootstrap komponentleriniň käbirini gaýtadan işlemäge we giňeltmäge mümkinçilik bereris.

CSS üýtgeýjilerini nähili ulanýandygymyzy bilmek üçin tablisa resminamalarymyza göz aýlaň .

Şeýle hem, geljekde has köp komponent ulanylmagy bilen, gözeneklerimiz üçin CSS üýtgeýjilerini ulanýarys.

Mysallar

CSS üýtgeýjileri Sassyň üýtgeýjilerine meňzeş çeýeligi hödürleýär, ýöne brauzere hyzmat etmezden ozal düzmek zerurlygy bolmazdan. Mysal üçin, bu ýerde sahypamyzyň şriftini we CSS üýtgeýjileri bilen baglanyşyk stillerini täzeden düzýäris.

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