Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

CSS vɛriɔbul dɛn

Yuz Bootstrap in CSS kɔstɔm prɔpati fɔ fast ɛn fɔwad-luk dizayn ɛn divɛlɔpmɛnt.

Na dis pej

Bootstrap inklud bɔku CSS kɔstɔm prɔpati dɛn (variables) insay in kɔmpilayt CSS fɔ rial-taym kɔstɔmayshɔn we nɔ nid fɔ kɔmpilayt Sass bak. Dɛn tin ya de mek am izi fɔ gɛt valyu dɛn we dɛn kin yuz ɔltɛm lɛk wi tim kɔlɔ, brekpɔynt, ɛn praymari font stak dɛn we yu de wok na yu brɔwza in inspɛkta, kɔd sanbɔks, ɔ jenɛral protɔtayp.

Ɔl wi kɔstɔm prɔpati dɛn gɛt prɛfiks witbs- fɔ avɔyd kɔnflikt wit tɔd pati CSS.

Rut vɛriɔbul dɛn

Na di variebul dɛm we wi inklud (notis se di :rootis required) we yu kin akses ɛnisay we Bootstrap in CSS de lod. Dɛn de na wi _root.scssfayl ɛn dɛn de insay wi kɔmpilayt dist fayl dɛn.

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

Kɔmpɔnɛnt vɛriɔbul dɛn

Wi de bigin bak fɔ mek yus to kɔstɔm prɔpati dɛn as lokal vɛriɔbul fɔ difrɛn kɔmpɔnɛnt dɛn. Dis we ya wi kin ridyus wi kɔmpilayt CSS, mek shɔ se stayl dɛn nɔ de inhɛrit na ples dɛn lɛk nest tebul dɛn, ɛn alaw sɔm besik ristayl ɛn ɛkstend fɔ Bootstrap kɔmpɔnɛnt dɛn afta Sass kɔmpilayshɔn.

Luk wi tebul dɔkyumentri fɔ sɔm insayt bɔt aw wi de yuz CSS vɛriɔbul dɛn .

Wi de yuz CSS vɛriɔbul dɛn bak akɔdin to wi grid dɛn—fɔs fɔ gɔta dɛn—wit mɔ kɔmpɔnɛnt yuz we de kam insay di fyuchu.

Ɛgzampul dɛn

CSS vɛriɔbul dɛn de gi di sem kayn fleksibiliti lɛk Sass in vɛriɔbul dɛn, bɔt dɛn nɔ nid fɔ kɔmpilayt bifo dɛn sav dɛn to di brawza. Fɔ ɛgzampul, na ya wi de riset wi pej in font ɛn link stayl dɛn wit CSS vɛriɔbul dɛn.

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

Grid brekpoint dɛn

Pan ɔl we wi de inklud wi grid brekpɔynt dɛn as CSS vɛriɔbul dɛn (eksept fɔ xs), no se CSS vɛriɔbul dɛn nɔ de wok na midia kwɛstyɔn dɛn . Dis na bay dizayn insay di CSS spɛshal fɔ vɛriɔbul dɛn, bɔt i kin chenj insay di ia dɛn we de kam wit sɔpɔt fɔ env()vɛriɔbul dɛn. Chek dis Stack Overflow ansa fɔ sɔm ɛp link dɛn. Insay di tɛm, yu kin yuz dɛn vɛriɔbul dɛn ya na ɔda CSS sityueshɔn dɛn, ɛn bak na yu JavaSkript.