CSS üýtgeýjileri

“ Bootstrap ”, Sass-y täzeden işlemegiň zerurlygy bolmazdan, hakyky wagtda özleşdirmek üçin düzülen CSS-de köp sanly CSS aýratyn häsiýetlerini (üýtgeýjileri) öz içine alýar. 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şylyklaryň öňüni almak üçin goşulýar .

Kök üýtgeýjiler

:rootIne, “ Bootstrap” -yň CSS ýüklenen islendik ýerine girip bolýan üý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-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;
}

Komponent üýtgeýjileri

“Bootstrap 5” dürli komponentler üçin ýerli üýtgeýjiler hökmünde adaty häsiýetleri has köp ulanýar. Şeýlelik bilen, düzülen CSS-ni azaldýarys, stilleriň höwürtgelenen stollar ýaly ýerlerde miras galmajakdygyny üpjün edýäris we Sass düzülenden soň Bootstrap komponentleriniň käbirini gaýtadan işlemäge we giňeltmäge mümkinçilik berýäris.

CSS üýtgeýjilerini nähili ulanýandygymyzy bilmek üçin tablisa resminamalarymyza göz aýlaň . Gämi duralgalarymyz, v5.2.0 görnüşinde CSS üýtgeýjilerini hem ulanýarlar . Şeýle hem , geljekde has köp komponent ulanylyşy bilen, gözeneklerimizde CSS üýtgeýjilerini ulanýarys, ilkinji nobatda täze optiki CSS setini açmak üçin.

Mümkin boldugyça esasy komponent derejesinde CSS üýtgeýjileri belläris (mysal üçin, .navbarnavbar we onuň kiçi bölekleri üçin). Bu nirede we nädip sazlamalydygy baradaky çaklamany azaldýar we geljekki täzelenmelerde toparymyz tarapyndan aňsat üýtgeşmelere ýol açýar.

Prefiks

CSS üýtgeýjileriniň köpüsi öz kod koduňyz bilen çaknyşmazlyk üçin prefiksi ulanýarlar. --Bu prefiks her CSS üýtgeýjisinde talap edilýänlere goşmaça .

$prefixSass üýtgeýjisiniň üsti bilen prefiksi düzüň. Gaýybana tertipde düzüldi bs-(yzky çyzga üns beriň).

Mysallar

CSS üýtgeýjileri Sassyň üýtgeýjilerine meňzeş çeýeligi hödürleýär, ýöne brauzere hyzmat etmezden ozal düzmek zerurlygy ýok. 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);
}

Grid bölekleri

Tor nokatlarymyzy CSS üýtgeýjileri hökmünde goşsak-da ( CSS üýtgeýjileriniň media talaplarynda işlemeýändiginixs biliň) . Bu üýtgeýjiler üçin CSS spektrinde dizaýn boýunça, ýöne üýtgeýänleri goldamak bilen ýakyn ýyllarda üýtgäp biler . Käbir peýdaly baglanyşyklar üçin bu “Stack Overflow” jogabyna göz aýlaň. Şol wagt, bu üýtgeýjileri beýleki CSS ýagdaýlarynda, JavaScript-de ulanyp bilersiňiz.env()