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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

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

Bootstrap 5 reyɛ kɛse de custom properties adi dwuma sɛ local variables ma components ahorow. Saa kwan yi so no yɛtew yɛn CSS a yɛaboaboa ano no so, hwɛ hu sɛ wɔrennya style ahorow wɔ mmeae te sɛ nested tables, na yɛma kwan ma wɔyɛ Bootstrap afã horow no foforo ne ntrɛwmu titiriw bi 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ɛn navbars nso de CSS variables di dwuma sɛnea ɛte wɔ v5.2.0. Yɛde CSS variables nso redi dwuma wɔ yɛn grids no nyinaa so —titiriw ma gutters opt-in CSS grid foforo no —a component pii a wɔde di dwuma bɛba daakye.

Bere biara a ɛbɛyɛ yiye no, yɛde CSS variables bɛma wɔ base component level (sɛ nhwɛso no, .navbarma navbar ne ne sub-components). Wei brɛ baabi a wobɛtumi ayɛ ne sɛdeɛ wobɛsesa no ase, na ɛma yɛn kuo no tumi yɛ nsakraeɛ a ɛnyɛ den wɔ daakye nsɛm foforɔ mu.

Nsɛm a wɔde di kan

CSS variables dodow no ara de prefix di dwuma de kwati sɛ ɛne w’ankasa codebase bɛbɔ. Saa prefix yi ka --that's required wɔ CSS variable biara so no ho.

$prefixFa Sass variable no so yɛ prefix no sɛnea wopɛ. Sɛnea wɔahyɛ no, wɔde asi hɔ sɛ bs-(hyɛ dash a edi akyi no nsow).

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ɛ nea ɛnam 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, wubetumi de saa nsakrae ahorow yi adi dwuma wɔ CSS tebea afoforo mu, ne wo JavaScript nso mu.