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

Swilo leswi cinca-cincaka swa xiphemu

Bootstrap 5 yi ya yi tirhisa swihlawulekisi swa ntolovelo tanihi swilo leswi cinca-cincaka swa laha kaya swa swiphemu swo hambana-hambana. Hi ndlela leyi hi hunguta CSS ya hina leyi hlengeletiweke, hi tiyisisa leswaku switayele a swi dyi ndzhaka etindhawini to fana na matafula lama pfanganisiweke, naswona hi 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 . Ti -navbar ta hina ti tlhela ti tirhisa swilo leswi cinca-cincaka swa CSS ku sukela eka v5.2.0. Hi tlhela hi tirhisa swilo leswi cinca-cincaka swa CSS eka tigridi ta hina hinkwato—ngopfu-ngopfu eka ti-gutters gridi leyintshwa ya CSS yo hlawula ku nghena —na matirhiselo yo tala ya swiphemu lama taka enkarhini lowu taka.

Loko swi koteka, hi ta avela swilo leswi cinca-cincaka swa CSS eka xiyimo xa xiphemu xa le hansi (xikombiso, .navbareka navbar na swiphemu swa yona leswitsongo). Leswi swi hunguta ku ringanyeta laha na ndlela yo lulamisa, naswona swi pfumelela ku cinca ko olova hi ntlawa wa hina eka ku pfuxetiwa ka nkarhi lowu taka.

Xirhangi xa xitwari

Swilo swo tala swa CSS swi tirhisa xirhangi ku papalata ku tlumbana na codebase ya wena. Xirhangi lexi xi engetela eka --lexi lavekaka eka xihlawulekisi xin’wana na xin’wana xa CSS.

Endla xirhangi hi ku tirhisa $prefixxihlawulekisi xa Sass. Hi ku tiyimisela, yi vekiwile eka bs-(xiya dash leyi landzelaka).

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.