Swilo leswi cinca-cincaka swa CSS

Bootstrap yi katsa swihlawulekisi swo tala swa ntolovelo swa CSS (swilo leswi cinca-cincaka) eka CSS ya yona leyi hlengeletiweke ya ku cinca ka nkarhi wa xiviri handle ka xilaveko xo hlengeleta nakambe Sass. Leswi swi nyika mfikelelo wo olova eka mimpimo leyi tirhisiwaka ngopfu ku fana na mihlovo ya hina ya nhlokomhaka, tindhawu to tshoveka, na switachi swa fonto ya nkoka loko u tirha eka muhlahluvi wa browser ya wena, bokisi ra sava ra khodi, kumbe ku endla xikombiso hi ku angarhela.

Swihlawulekisi swa hina hinkwaswo swa ntolovelo swi rhangele hibs- ku papalata ku lwisana na CSS ya munhu wa vunharhu.

Swilo leswi cinca-cincaka swa timitsu

Hi leswi swilo leswi cinca-cincaka leswi hi swi katsaka (lemuka leswaku the :rootya laveka) leswi nga ngheniwaka kun’wana ni kun’wana laha CSS ya Bootstrap yi layichiweke kona. Ti kumeka eka _root.scssfayili ya hina naswona ti katsiwile eka tifayela ta hina ta dist leti hlengeletiweke.

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

Swilo leswi cinca-cincaka swa xiphemu

Hi tlhela hi sungula ku tirhisa swihlawulekisi swa ntolovelo tanihi swilo leswi cinca-cincaka swa laha kaya swa swiphemu swo hambana-hambana. Hi ndlela leyi hi nga hunguta CSS ya hina leyi hlengeletiweke, hi tiyisisa leswaku switayele a swi dyi ndzhaka etindhawini to fana na matafula lama pfanganisiweke, na ku pfumelela ku tlhela hi xitayili xa xisekelo na ku andlala swiphemu swa Bootstrap endzhaku ka ku hlengeletiwa ka Sass.

Languta matsalwa ya hina ya tafula ku kuma vutivi byo karhi bya ndlela leyi hi tirhisaka swilo leswi cinca-cincaka swa CSS .

Hi tlhela hi tirhisa swilo leswi cinca-cincaka swa CSS eka tigridi ta hina hinkwato—ngopfu-ngopfu eka ti-gutter—na matirhiselo yo tala ya swiphemu lama taka enkarhini lowu taka.

Swikombiso

Swilo leswi cinca-cincaka swa CSS swi nyika ku cinca-cinca loku fanaka na swilo leswi cinca-cincaka swa Sass, kambe handle ka xilaveko xa ku hlengeletiwa swi nga si tirhisiwa eka xihlamusela-marito. Xikombiso, laha hi tlhela hi veka fonto ya pheji ya hina na switayele swa vuhlanganisi hi swilo leswi cinca-cincaka swa CSS.

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

Swiphemu swa gridi

Loko hi ri karhi hi katsa tindhawu ta hina to tshoveka ta gridi tanihi swilo leswi cinca-cincaka swa CSS (handle ka xs), tiva leswaku swilo leswi cinca-cincaka swa CSS a swi tirhi eka swivutiso swa midiya . Leswi swi endliwa hi dizayini eka CSS spec ya swilo leswi cinca-cincaka, kambe swi nga cinca eka malembe lama taka hi nseketelo wa env()swilo leswi cinca-cincaka. Languta nhlamulo leyi ya Stack Overflow ku kuma swihlanganisi leswi pfunaka. Hi nkarhi wolowo, u nga tirhisa swilo leswi swi cinca-cincaka eka swiyimo swin’wana swa CSS, swin’we ni le ka JavaScript ya wena.