Umi mbaꞌekuaarã CSS rehegua

Bootstrap oike mokõi docena rupi CSS mbaꞌekuaarã jeporupyre (variables) iCSS oñembohekopyrévape, hetaiteve oĩ tape rehe oñemboheko porãve hag̃ua peteĩ componente rehegua. Ko’ãva ome’ẽ jeike ndahasýiva umi valor ojeporúva jepi ore tema sa’y, punto de ruptura ha pila fuente primaria-icha oñemba’apo jave ne kundahára inspector-pe, peteĩ código sandbox térã prototipo general-pe.

Opaite ore mba’ekuaarã jeporupyre oñemboguapybs- mboyve ani hag̃ua ojoavy CSS mbohapýha ndive.

Umi mba’ekuaarã hapo rehegua

Ko’ápe oĩ umi mba’e’oka ñamoĩva (ñañatendéke pe :rootoñeikotevẽha) ikatúva ojeike oimehápe Bootstrap CSS ojekargahápe. Ha’ekuéra oĩ ore _root.scssrembiapokue ryepýpe ha oike ore rembiapokue dist oñembohekopyrévape.

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

Umi variable componente rehegua

Avei ñañepyrũma jaipuru umi propiedad personalizada variable local ramo opaichagua componente-pe g̃uarã. Péicha ikatu ñamboguejy ñande CSS oñembohekopyréva, ñañangareko umi estilo ndojeheredaiha umi tenda taꞌãngamýi anidado-icha, ha jaheja algún reestilo básico ha oñembotuichave umi componente Bootstrap rehegua Sass oñemboheko rire.

Ejesarekomína ore kuatiañe’ẽ kuatiarogue rehe reikuaa hag̃ua mba’éichapa jaipuru hína CSS mba’ekuaarã .

Avei roipuru hína umi mba’e’oka CSS ore rejillakuéra rupi —tenonderãite umi canalización-pe g̃uarã— hetave componente jepuru oútava tenonderãme.

Tembiecharã

Umi CSS mbaꞌekuaarã oikuaveꞌe peteĩchagua flexibilidad Sass mbaꞌekuaarã ndive, ha katu natekotevẽi oñemboheko oñembohasa mboyve kundahárape. Techapyrã, ko’ápe ñamoĩjey ñande página letra ha estilo enlace rehegua umi variable CSS reheve.

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