CSS a danglamna tur a awm

Bootstrap hian a compiled CSS ah hian CSS custom property (variables) tam tak a dah tel a, chu chu Sass recompile ngai lovin real-time customization atan a ni. Hengte hian i browser inspector, code sandbox, emaw general prototyping-a hnathawh hunah kan theme color, breakpoint, leh primary font stack ang chi value hman tlanglawn tak takte awlsam taka hmuh theihna a pe a ni.

Kan custom property zawng zawng hibs- third party CSS nena inrem lohna tur prefixed vek a ni.

Root variable te chu

:rootHetah hian Bootstrap-a CSS load awmna hmun apiangah access theih tur variable kan dah tel (note that the is required) te chu kan rawn tarlang e. Kan _root.scssfile ah hian an awm a, kan compiled dist file ah te pawh an tel ve bawk.

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

Component hrang hrang a awm thei

Component hrang hrang tana local variable atan custom property kan hmang tan bawk. Chutiang chuan kan compiled CSS kan tihtlem thei a, nested table ang hmunah styles inherited a nih loh nan kan enfiah thei a, Sass compilation zawhah Bootstrap components basic restyling leh extending thenkhat kan phalsak thei bawk.

CSS variable kan hman dan tur hriatna engemaw chen kan table documentation hi en la .

Kan grid hrang hrangah CSS variable kan hmang bawk—a bik takin gutters atan—nakin lawkah component hman tam zawk a awm dawn a ni.

Entirna te

CSS variable te hian Sass-a variable te ang bawkin flexibility an pe a, mahse browser-a an rawn thawn hmain compilation a ngai lo. Entirnan, hetah hian kan page font leh link style te chu CSS variable hmangin kan reset a.

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

Grid breakpoint te a awm

Kan grid breakpoint te chu CSS variable anga kan dah lai hian ( , tih loh chu xs), media query ah CSS variable te hian hna an thawk lo tih hre reng ang che . Hei hi variable hrang hrangte tana CSS spec-a design hmanga siam a ni a, mahse kum lo awm turteah chuan env()variable support-na nen a danglam thei. Link \angkai tak tak hmuh theih nan he Stack Overflow chhanna hi en la . Chutih lai chuan heng variable te hi CSS situation dang ah te, i JavaScript ah te pawh i hmang thei bawk.