CSS variables

Ny Bootstrap dia ahitana fananana CSS maro (variables) ao amin'ny CSS natambatra ho an'ny fanamboarana amin'ny fotoana tena izy nefa tsy mila mamerina ny Sass. Ireo dia manome fahafahana miditra mora amin'ny soatoavina fampiasa mahazatra toy ny loko loha-hevitray, ny teboka fahatapahana, ary ny antonta endri-tsoratra voalohany rehefa miasa ao amin'ny mpanara-maso ny mpitety tranonkalanao, ny boaty fasika kaody, na ny fanaovana prototype amin'ny ankapobeny.

Ny fananantsika manokana rehetra dia misy tombo-kasebs- mba hisorohana ny fifandirana amin'ny CSS antoko fahatelo.

Root variables

Ireto ny variables ampidirintsika (mariho fa :rootilaina) izay azo idirana na aiza na aiza misy ny CSS Bootstrap. Izy ireo dia hita ao amin'ny _root.scssrakitray ary tafiditra ao amin'ny rakitra dist natambatray.

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

Variable singa

Manomboka mampiasa ny fananana manokana ho fari-toerana ho an'ny singa samihafa ihany koa izahay. Amin'izany fomba izany no ahafahantsika mampihena ny CSS natambatray, miantoka fa tsy lovaina amin'ny toerana toy ny latabatra misy akany ny fomba, ary mamela ny fanamboarana fototra sy fanitarana ny singa Bootstrap aorian'ny fanangonana Sass.

Jereo ny antontan-taratasintsika momba ny fomba ampiasana ny fari-piadidiana CSS .

Mampiasa ny fari-piadidiana CSS ihany koa izahay — indrindra ho an'ny tatatra — miaraka amin'ny fampiasana singa bebe kokoa amin'ny ho avy.

OHATRA

Ny fari-piadidiana CSS dia manome flexibility mitovy amin'ny fari-piainan'i Sass, saingy tsy mila fanangonam-bokatra alohan'ny hanolorana azy amin'ny navigateur. Ohatra, averinay eto ny endri-tsoratra sy ny fomba fampifandraisana amin'ny CSS.

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

Grid breakpoints

Na dia ampidirinay ho toy ny fari-pialan'ny CSS (afa-tsy ny xs), ny fari-pitsipika CSS dia tsy mandeha amin'ny fangatahana media . Izany dia amin'ny alàlan'ny famolavolana ny CSS spec for variables, saingy mety hiova amin'ny taona ho avy miaraka amin'ny fanohanana ny env()variables. Jereo ity valiny Stack Overflow ity ho an'ny rohy mahasoa sasany. Mandritra izany fotoana izany, azonao atao ny mampiasa ireo fari-piainana ireo amin'ny toe-javatra CSS hafa, ary koa amin'ny JavaScript-nao.