CSS nsakrae ahorow

Bootstrap de bɛyɛ CSS amanneɛbɔ agyapade (nsakrae) bɛyɛ dumien abien ka ho wɔ ne CSS a wɔaboaboa ano no mu, a dumien foforo wɔ kwan so ma customization a ɛkɔ anim wɔ afã biara so. 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-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --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));
}

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