in English

Temática Ñembosaraipavẽ

Emohenda Bootstrap 4 ore Sass mbaꞌekuaarã pyahu oñemboguapýva reheve umi estilo global jeporavorãme g̃uarã temática ha componente ñemoambue ndahasýivape g̃uarã.

Moñepyrũmby

Bootstrap 3-pe, temática tuicha oñemboguata umi mbaꞌekuaarã ñemboyke rupive LESS-pe, CSS jeporupyre ha peteĩ tema estilo kuatia’atã añónte romoĩva’ekue ore distrembiapokue ryepýpe. Oñeha’ãramo michĩmi, peteĩ ikatu odiseñopaite Bootstrap 3 jehecha opoko’ỹre umi archivo núcleo rehe. Bootstrap 4 ome’ẽ peteĩ enfoque ojekuaáva, ha katu iñambue’imi.

Koꞌág̃a, temática ojejapo umi variable Sass, mapa Sass ha CSS jeporupyre rupive. Ndaipórivéima hoja de estilo tema dedicado; upéva rangue, ikatu emboguata pe tema incorporado emoĩ hag̃ua gradiente, sombra ha hetave mba’e.

Sass rehegua

Eipuru ore vore Sass ypykue rehegua eipuru hag̃ua mbaꞌekuaarã, mapa, mixin ha hetave mbaꞌe emohenda jave Sass eipurúvo nde mbaꞌekuaarã pipeline tee.

Archivo ñemohenda

Ikatu jave, ani remoambue Bootstrap rembiapokue tenondegua. Sass-pe g̃uarã, upéva heꞌise rejapo hag̃ua nde kuatiañeꞌepyre tee ogueraháva Bootstrap ikatu hag̃uáicha emoambue ha embotuichave. Ñaimo’ãramo reipuruha peteĩ paquete mohendaha npm-icha, reguerekóta peteĩ vore ñemohenda ojoguáva kóicha:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Emboguejy ramo ore rembiapokue ypykue ha ndereiporúiramo peteĩ paquete mohendaha, emohendase nde po rupive peteĩ mba’e ojoguáva upe estructura-pe, eñongatu Bootstrap rembiapokue ypykue ndehegui.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importación rehegua

Nde -pe custom.scss, reguerúta Bootstrap rembiapokue Sass ypykue. Nde reguereko mokõi opción: emoinge opaite Bootstrap rehegua, térã eiporavo umi pehẽngue reikotevẽva. Romokyre’ỹ ko’ã ipahaguévape, jepémo eime consciente oĩha algunos requisitos ha dependencias ore componente-kuéra rupi. Avei tekotevẽta remoĩ michĩmi JavaScript ore plugins-pe g̃uarã.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Upe ñembosako’i hendaitépe, ikatu reñepyrũ remoambue oimeraẽva Sass mba’e’oka ha mapa nde custom.scss. Ikatu avei eñepyrũ emoĩ Bootstrap pehẽngue pe // Optionalsección guýpe oñeikotevẽháicha. Ro’e reipuru hag̃ua pila importación henyhẽva ore bootstrap.scssrembiapokuegui ne ñepyrũrãramo.

Umi mba’e ojehúva por defecto

Opaite Sass mbaꞌekuaarã Bootstrap-pe oguereko !defaultmbaꞌekuaarã ohejáva ndéve embogue pe mbaꞌekuaarã mbaꞌekuaarã ñepyrũrã nde Sass-pe voi emoambueꞌeỹre Bootstrap código fuente. Emboguejy ha emoĩ umi mbaꞌekuaarã tekotevẽháicha, emoambue ivalór ha eipeꞌa pe !defaultpoyvi. Oñeme’ẽma ramo peteĩ mba’e’oka, upéicharamo noñeme’ẽmo’ãi jey umi mba’ekuaarã tee rupive Bootstrap-pe.

Ejuhúta Bootstrap mbaꞌekuaarã lista completa -pe scss/_variables.scss. Oĩ mba’e’oka oñemboguapýva null, ko’ã mba’e’oka ndoguerúi mba’ekuaarã ndojehejareíriramo ne ñembohekorãme.

Umi mbaꞌekuaarã jeguerova ouvaꞌerã ojegueru rire ñande función, mbaꞌekuaarã ha mixin, ha katu umi jegueru hembýva mboyve.

Ko’ápe oĩ peteĩ techapyrã omoambuéva pe background-colorha colorpe g̃uarã <body>ojegueru ha oñemboheko jave Bootstrap npm rupive:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Ejapo jey tekotevẽháicha oimeraẽva mbaꞌekuaarã Bootstrap-pe g̃uarã, oikehápe umi opción global iguýpe.

¡Eñepyrũ Bootstrap ndive npm rupive ore proyecto ñepyrũrã ndive! Eho twbs/bootstrap-npm-starter plantilla ryru’ípe ehecha hag̃ua mba’éichapa ikatu emopu’ã ha emohenda Bootstrap nde proyecto npm-pe. Oike ipype Sass compilador, Autoprefixer, Stylelint, PurgeCSS ha Bootstrap Iconos.

Mapa ha bucle rehegua

Bootstrap 4 oguereko peteĩ pokõi Sass mapa, umi par valor clave rehegua ombohapevéva omoheñói hag̃ua familia CSS ojoajúva rehegua. Jaipuru Sass mapakuéra ñande sa’ykuérape g̃uarã, umi punto de ruptura cuadrícula rehegua ha hetave mba’épe g̃uarã. Sass mbaꞌekuaarãicha avei, opaite Sass mapa oguereko !defaultpoyvi ha ikatu oñemboyke ha oñembotuichave.

Oĩ ñande Sass mapa oñembojoajúva umi vacío-pe por defecto. Kóva ojejapo ikatu hag̃uáicha oñembotuichave ndahasýi peteĩ mapa Sass oñemeꞌevaꞌekue rehegua, ha katu oúva hepykue rehe ojejapo hag̃ua hasyve’imi ojeipeꞌa hag̃ua umi mbaꞌe peteĩ mapa-gui.

Omoambue mapa

Emoambue hag̃ua peteĩ sa’y oĩmava ore $theme-colorsmapa-pe, emoĩ ko’ãva ne rembiapokue Sass jeporupyre-pe:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Oñemoĩve mapa-pe

Oñemoĩ hag̃ua peteĩ sa’y pyahu $theme-colors, emoĩve clave ha valor pyahu:

$theme-colors: (
  "custom-color": #900
);

Ojepe’a pe mapa-gui

Eipeʼa hag̃ua umi kolór $theme-colors, térã oimeraẽ ótro mápagui, eipuru map-remove. Eikuaa porãke remoinge va’erãha ore mba’ejerure ha opción apytépe:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Umi llave oñeikotevẽva

Bootstrap oimoꞌa oĩha algunas clave específicas umi mapa Sass ryepýpe jaipuruháicha ha ñamosarambi koꞌãva ñande voi. Emohenda jave umi mapa oikeva’ekue, ikatu rejuhu jejavy ojepuruhápe peteĩ Sass mapa clave específica.

Techapyrã, jaipuru primary, success, ha dangerumi tecla oúva $theme-colorsumi enlace, botón ha estado formulario-pe g̃uarã. Oñemyengoviávo ko’ã clave valor opresentava’erã mba’eveichagua mba’e’oka, ha katu ojeipe’áramo ikatu omoheñói Sass compilación mba’e’apopy. Ko’ã instancia-pe, tekotevẽta remoambue código Sass oiporúva umi valor.

Funciones rehegua

Bootstrap oipuru heta Sass rembiaporã, ha katu peteĩ subconjunto añoite ojepuru temática general-pe. Romoĩ mbohapy tembiaporã ojehupyty hag̃ua mbaꞌekuaarã umi mapa saꞌi rehegua:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Koꞌãva oheja ndéve eiporavo peteĩ saꞌi peteĩ Sass mapa-gui ojoguaiterei mbaꞌeichaitépa reiporúta peteĩ saꞌi mboajepyréva v3-gui.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Avei jaguereko ambue función jahupyty hagua petet nivel particular color rehegua $theme-colorsmapagui. Umi valor nivel negativo rehegua ombohesapéta pe color, ha umi nivel yvatevéva katu iñypytũta.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

En práctica, rehenóita función ha rehasáta mokõi parámetro-pe: color réra oúva $theme-colors(techapyrã, primario térã peligro) ha peteĩ nivel numérico.

.custom-element {
  color: theme-color-level(primary, -10);
}

Ikatu oñembojoapy tembiaporã ambuéva tenonderãme térã nde Sass jeporupyre emoheñói hag̃ua tembiaporã nivel rehegua Sass mapa ambuévape g̃uarã, térã peteĩ genérico jepe reipotáramo reñe’ẽve.

Contraste de color rehegua

Peteĩ tembiaporã ambuéva ñamoĩva Bootstrap-pe haꞌehína función contraste color rehegua, color-yiq. Oipuru espacio color YIQ ombojevy hag̃ua ijeheguiete peteĩ color contraste tesape ( #fff) térã iñypytũva ( #111) oñemopyendáva color base ojeꞌevaꞌekue rehe. Ko tembiaporã iporãiterei umi mixin térã bucle-pe g̃uarã emoheñóihápe heta clase.

Techapyrã, ojejapo hag̃ua muestra de color ñande $theme-colorsmapa-gui:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Ikatu avei ojepuru umi tekotevẽ contraste peteĩ jeýpe g̃uarã:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Ikatu avei emombeꞌu peteĩ saꞌi base ore función mapa color rehegua ndive:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Okañy SVG-gui

Jaipuru escape-svgtembiaporã jajehekýi hag̃ua <, >ha #karameg̃ua SVG taꞌãngamýi tapykuehohápe g̃uarã. Koꞌã karameg̃ua tekotevẽ ojehekýi ojehechauka porã hag̃ua taꞌãngamýi tapykuegua IE-pe. Ojepuru jave escape-svgtembiaporã, oñecitavaꞌerã umi URI dato rehegua.

Umi función Oñembojoapy ha Ojepe’a hag̃ua

Jaipuru umi tembiaporã addha subtractñambojere hag̃ua CSS calcrembiapokue. Koꞌã tembiaporã rembipota tenondegua haꞌehína ani hag̃ua ojejavy oñembohasáramo peteĩ 0valor “ununidad’ỹva” peteĩ calcexpresiónpe. Umi ñe’ẽjoaju ha’eháicha calc(10px - 0)ombojevýta peteĩ jejavy opaite kundahárape, jepémo matemáticamente oĩ porã.

Techapyrã moõpa ovale pe calc:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Techapyrã oimehápe calc ndovaléi:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass opciones rehegua

Emohenda Bootstrap 4 ore vore mbaꞌekuaarã jeporupyre rehegua oñemohendapyréva reheve ha embohasa pyaꞌe umi CSS jeporavopyre global $enable-*Sass mbaꞌekuaarã pyahu reheve. Emboyke peteĩ mbaꞌekuaarã valor ha embojoaju jey ndive npm run testoñeikotevẽháicha.

Ikatu ejuhu ha emohenda ko’ã mba’e’oka opción global clave-pe g̃uarã Bootstrap scss/_variables.scssvore’ípe.

Variable rehegua Umi mba’ekuaarã Techaukaha
$spacer 1rem(por defecto), térã oimeraẽva valor > 0 Omombeꞌu espaciador valor por defecto omoheñói hag̃ua programáticamente ñande utilidad espaciador rehegua .
$enable-rounded true(por defecto) térãfalse Ombohapéva border-radiusestilo oñembohekopyréva opaichagua componente rehe.
$enable-shadows truetérã false(por defecto) . Ombohapéva umi estilo decorativo ojedefinivaꞌekue box-shadowopaichagua componente rehe. Ndoafectái box-shadows ojeporúva estados de enfoque-pe guarã.
$enable-gradients truetérã false(por defecto) . Ombohapéva gradiente background-imageoñembohekopyréva estilo rupive opaichagua componente rehe.
$enable-transitions true(por defecto) térãfalse Ombohapéva transitions oñembohekopyréva opaichagua componente rehe.
$enable-prefers-reduced-motion-media-query true(por defecto) térãfalse Ombohapéva prefers-reduced-motionñeporandu medio rehegua , omboguejýva peteĩteĩva taꞌãngamýi/transición oñemopyendáva puruhára kundahára/sistema operativo oiporavóva rehe.
$enable-hover-media-query truetérã false(por defecto) . Ojeporu’ỹre
$enable-grid-classes true(por defecto) térãfalse Ombohapéva CSS mboꞌepy ñemoheñói sistema red rehegua (techapyrã, .container, .row, .col-md-1, ha mbaꞌe).
$enable-caret true(por defecto) térãfalse Ombohapéva seudo elemento caret rehegua .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(por defecto) térãfalse Emoĩ “po” vore umi elemento botón rehegua ndojejokóivape.
$enable-print-styles true(por defecto) térãfalse Ombohapéva umi estilo oñemboheko porãve hag̃ua impresión.
$enable-responsive-font-sizes truetérã false(por defecto) . Ombohapéva umi letra tuichakue ombohováiva .
$enable-validation-icons true(por defecto) térãfalse Ombohapéva background-imageicono umi entrada jehaipyre ryepýpe ha algunos formularios personalizados estado validación-pe g̃uarã.
$enable-deprecation-messages true(por defecto) térãfalse Emohenda to falseemokañy hag̃ua ñe’ẽñemi eipuru jave oimeraẽva umi mixin ha tembiaporã ndojepuruvéimava oñembosako’íva ojeipe’a hag̃ua v5.

Sa'y

Heta Bootstrap opaichagua componente ha utilidad oñemopuꞌa peteĩ serie de colores rupive oñembohekopyréva peteĩ mapa Sass-pe. Ko mapa ikatu ojejapo bucle Sass-pe ojejapo pyaꞌe hag̃ua peteĩ serie de reglamentos.

Opaite sa’ykuéra

Opaite saꞌi ojeguerekóva Bootstrap 4-pe, ojeguereko Sass mbaꞌekuaarã ramo ha peteĩ Sass mapa scss/_variables.scssvore ryepýpe. Kóva oñembotuichavevaꞌerã umi ñeguenohẽ michĩva oúvape oñembojoapy hag̃ua sombra adicional, ojoguaiterei pe paleta escala de grises ñamoĩmavape .

$hovy #007bff rehegua
$indigo rehegua #6610f2 rehegua
$púrpura rehegua #6f42c1 rehegua
$rosa rehegua #e83e8c rehegua
$pytã # dc3545 rehegua
$naranja rehegua # fd7e14 rehegua
$hovy # ffc107 rehegua
$verde rehegua #28a745 rehegua
$teal rehegua #20c997 rehegua
$cian rehegua #17a2b8 rehegua

Ko’ápe ojehecha mba’éichapa ikatu reipuru ko’ãva nde Sass-pe:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Umi clase utilidad color rehegua ojeguereko avei oñemboguapy hag̃ua colorha background-color.

Amo gotyove, ñañeha’ãta ñame’ẽ Sass mapa ha variable umi sombra peteĩteĩva sa’y rehegua jajapo haguéicha umi sa’y escala gris rehegua iguýpe.

Umi sa’ykuéra tema rehegua

Jaipuru peteĩ subconjunto opaite saꞌi rehegua jajapo hag̃ua peteĩ saꞌi saꞌi michĩvéva ñamoheñói hag̃ua esquema saꞌi rehegua, ojeguerekóva avei Sass mbaꞌekuaarã ramo ha peteĩ Sass mapa Bootstrap scss/_variables.scssvore ryepýpe.

$primaria rehegua #007bff rehegua
$mokõiha #6c757d rehegua
$jehupytyrã #28a745 rehegua
$peligro rehegua # dc3545 rehegua
$ñemomarandu # ffc107 rehegua
$info rehegua #17a2b8 rehegua
$tesape # f8f9fa rehegua
$pytũ #343a40 rehegua

Grises rehegua

Peteĩ conjunto expansivo variable gris rehegua ha peteĩ mapa Sass en scss/_variables.scsspara sombras consistentes de gris nde proyecto pukukue javeve. Ñañamindu’u ko’ãva ha’eha “gris fresco”, oguerekóva tendencia peteĩ tono hovy sutil gotyo, umi gris neutro rangue.

$gris-100 rehegua # f8f9fa rehegua
$gris-200 rehegua #e9ecef rehegua
$gris-300 rehegua #dee2e6 rehegua
$gris-400 rehegua #ced4da rehegua
$gris-500 rehegua # adb5bd rehegua
$gris-600 rehegua #6c757d rehegua
$gris-700 rehegua #495057 rehegua
$gris-800 rehegua #343a40 rehegua
$gris-900 rehegua #212529 rehegua

, ryepýpe scss/_variables.scss, rejuhúta Bootstrap sa’y ñemoambue ha Sass mapa. Ko’ápe oĩ peteĩ techapyrã $colorsSass mapa rehegua:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Emoĩ, eipe’a térã emoambue mba’ekuaarã mapa ryepýpe embopyahu hag̃ua mba’éichapa ojepuru heta ambue componente-pe. Ñambyasy ko’ã momento-pe, ndaha’éi opaite componente oipurúva ko mapa Sass. Umi actualización oútava oñeha’ãta omoporãve ko mba’e. Upe peve, eplanea eipuru hagua umi ${color}variable ha ko mapa Sass rehegua.

Umi componente rehegua

Heta Bootstrap componente ha utilidad oñemopuꞌa umi @eachbucle reheve ojeiteráva peteĩ Sass mapa ári. Kóva oipytyvõ especialmente ojejapo hag̃ua umi variante peteĩ componente rehegua ñande rupive $theme-colorsha ojejapo hag̃ua umi variante ombohováiva peteĩteĩva punto de ruptura-pe g̃uarã. Emohenda jave ko’ã Sass mapa ha embojoaju jeývo, rehecháta ijeheguiete ne ñemoambue ojehechaukáva ko’ã bucle-pe.

Umi omoambuéva

Heta Bootstrap componente oñemopuꞌa peteĩ enfoque clase base-modificador reheve. Kóva heꞌise pe estilo tuichakue oguerekoha peteĩ clase base-pe (techapyrã, .btn) umi estilo ñemoambue katu oñemboty umi clase modificador-pe (techapyrã, .btn-danger). Ko’ã mbo’esyry modificador oñemopu’ã $theme-colorsmapa guive ojejapo hag̃ua personalización ñande clase modificador papapy ha réra.

Koꞌape oĩ mokõi techapyrã mbaꞌeichaitépa jajapo bucle $theme-colorsmapa ári jajapo hag̃ua modificador .alertcomponente-pe ha opaite ñande .bg-*utilidad fondo rehegua.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Ombohováiva

Ko’ã Sass bucle ndaha’éi oñembotýva umi mapa color-pe añónte, avei. Ikatu avei emoheñói variación ombohováiva ne componente térã utilidad-kuéra rehegua. Jaipyhy techapyrãramo ñande utilidad alineación jehaipyre ombohováiva ñambojeheꞌahápe peteĩ @eachbucle $grid-breakpointsSass mapa-pe g̃uarã peteĩ consulta medio rehegua ndive.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Tekotevẽramo remoambue nde $grid-breakpoints, ne ñemoambue ojeporúta opaite umi bucle ojeiteráva upe mapa ári.

Umi mbaꞌekuaarã CSS rehegua

Bootstrap 4 oike mokõi docena rupi CSS mbaꞌekuaarã jeporupyre (variables) iCSS oñembohekopyrévape. Ko’ãva ome’ẽ jeike ndahasýiva umi valor ojeporúva jepi ore tema sa’ykuéra, 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.

Umi variable ojeguerekóva

Ko’ápe oĩ umi variable ñamoĩva (ñañatendéke pe :rootoñeikotevẽha). Ha'ekuéra oĩ ore _root.scssarchivo-pe.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Tembiecharã

Umi CSS mbaꞌekuaarã oikuaveꞌe peteĩchagua jepurukuaa 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(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Umi variable punto de ruptura rehegua

Ñamoĩramo jepe iñepyrũrãme umi punto de ruptura ñande CSS mbaꞌekuaarãme (techapyrã, --breakpoint-md), koꞌãva ndojeguerohorýi umi ñeporandu medio rehegua -pe , ha katu ikatu gueteri ojepuru umi tembiapoukapy ryepýpe umi ñeporandu medio rehegua. Koꞌã mbaꞌekuaarã punto de ruptura opyta CSS oñembohekopyrévape oñembojoja hag̃ua tapykue gotyo oñemeꞌeramo ikatuha ojepuru JavaScript rupive. Eikuaave hag̃ua pe especificación -pe .

Ko’ápe oĩ peteĩ techapyrã umi mba’e ndojeguerohorýiva rehegua:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Ha ko’ápe oĩ peteĩ techapyrã umi mba’e oipytyvõva rehegua:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}