Variablat CSS

Bootstrap përfshin rreth dy duzina veti (variabla) të personalizuara të CSS në CSS-në e tij të përpiluar, me dhjetëra të tjera në rrugë për përmirësimin e personalizimit mbi bazën e përbërësve. Këto sigurojnë qasje të lehtë në vlerat e përdorura zakonisht si ngjyrat tona të temave, pikat e ndërprerjes dhe grupet kryesore të shkronjave kur punoni në inspektorin e shfletuesit tuaj, një kuti rërë kodi ose prototipi të përgjithshëm.

Të gjitha pronat tona të personalizuara janë prefiksuar mebs- për të shmangur konfliktet me CSS të palës së tretë.

Variablat rrënjë

Këtu janë variablat që ne përfshijmë (vini re se :rootkërkohet) që mund të aksesohen kudo ku ngarkohet CSS e Bootstrap. Ato ndodhen në _root.scssskedarin tonë dhe përfshihen në skedarët tanë të përpiluar dist.

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

Variablat përbërës

Ne po fillojmë gjithashtu të përdorim vetitë e personalizuara si variabla lokale për komponentë të ndryshëm. Në këtë mënyrë ne mund të zvogëlojmë CSS-në tonë të përpiluar, të sigurojmë që stilet të mos trashëgohen në vende si tabelat e mbivendosura dhe të lejojmë disa rivendosje dhe zgjerim bazë të komponentëve të Bootstrap pas përpilimit të Sass.

Hidhini një sy dokumentacionit tonë të tabelës për disa njohuri se si po përdorim variablat CSS .

Ne po përdorim gjithashtu variabla CSS në rrjetet tona - kryesisht për ulluqet - me më shumë përdorim të komponentëve që vijnë në të ardhmen.

Shembuj

Variablat CSS ofrojnë fleksibilitet të ngjashëm me variablat e Sass, por pa nevojën për përpilim përpara se të shërbehen në shfletues. Për shembull, këtu po rivendosim stilet e shkronjave dhe lidhjeve të faqes sonë me variabla CSS.

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