CSS nsakrae ahorow

Bootstrap de CSS custom properties (variables) pii ka ne CSS a wɔaboaboa ano no mu ma bere ankasa mu customization a enhia sɛ wɔsan boaboa Sass ano. Eyinom ma ɛyɛ mmerɛw sɛ wubenya gyinapɛn ahorow a wɔtaa de di dwuma te sɛ yɛn asɛmti kɔla ahorow, breakpoints, ne font stacks titiriw bere a woreyɛ adwuma wɔ wo browser no inspector, code sandbox, anaa general prototyping mu no.

Wɔde yɛn amanne agyapade nyinaa ahyɛ animbs- sɛnea ɛbɛyɛ a yɛne CSS a ɛto so abiɛsa bɛbɔ ntawntawdi.

Ntini mu nsakrae ahorow

Nsakraeɛ a yɛde ka ho (hyɛ no nsow sɛ :rootɛho hia) a wobɛtumi akɔ baabiara a wɔde Bootstrap CSS no ahyɛ mu no nie. Wɔwɔ yɛn _root.scssfael no mu na wɔde ka yɛn dist fael ahorow a yɛaboaboa ano no ho.

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

Nneɛma a ɛsakra wɔ afã horow mu

Yɛrefi ase nso de custom properties adi dwuma sɛ local variables ama components ahorow. Saa kwan yi so no yebetumi atew yɛn CSS a yɛaboaboa ano no so, ahwɛ ahu sɛ wɔrennya style ahorow wɔ mmeae te sɛ nested tables, na yɛama kwan ma wɔayɛ Bootstrap afã horow no mu nneɛma atitiriw bi na wɔatrɛw mu wɔ Sass a wɔaboaboa ano akyi.

Hwɛ yɛn table documentation no mu na woanya nhumu bi wɔ sɛnea yɛde CSS variables redi dwuma no ho .

Yɛsan nso de CSS variables redi dwuma wɔ yɛn grids no nyinaa so —titiriw ma gutters —a component dwumadie pii bɛba daakye.

Nhwɛso ahorow

CSS nsakraeɛ no ma nsakraeɛ a ɛte sɛ Sass nsakraeɛ no, nanso ɛho nhia sɛ wɔboaboa ano ansa na wɔde akɔma browser no. Sɛ nhwɛso no, ha na yɛresan asiesie yɛn krataafa no font ne link styles no denam CSS variables so.

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

Grid a ɛpaapae no

Bere a yɛde yɛn grid breakpoints no ka ho sɛ CSS variables (gye sɛ xs), hu sɛ CSS variables no nyɛ adwuma wɔ media queries mu . Eyi yɛ denam nhyehyɛe so wɔ CSS spec no mu ma nsakrae ahorow, nanso ebetumi asesa wɔ mfe a ɛreba no mu a mmoa ma env()nsakrae ahorow. Hwɛ Stack Overflow mmuae yi ma link ahorow bi a ɛboa. Saa bere yi mu no, wubetumi de saa nsakrae ahorow yi adi dwuma wɔ CSS tebea afoforo mu, ne wo JavaScript nso mu.