Source

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.

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

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

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

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

// Optional
@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 4-pe oguereko !defaultmbaꞌekuaarã ohejáva ndéve embogue pe mbaꞌekuaarã mbaꞌekuaarã vore 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.

Umi mbaꞌekuaarã ñemboyke peteĩchagua Sass vore ryepýpe ikatu oúva umi mbaꞌekuaarã tenondegua mboyve térã rire. Ha katu, oñemboyke jave Sass vorekuéra rupi, ne ñemboyke oúva’erã emoinge mboyve Bootstrap Sass vorekuéra.

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

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

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 mapa ñ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 nandipe por defecto. Kóva ojejapo ikatu hag̃uáicha oñembotuichave ndahasýi peteĩ mapa Sass oñemeꞌevaꞌekue, 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. Roike 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’y peteĩ Sass mapa-gui ojoguaiterei mba’éichapa reiporúta peteĩ sa’y vore 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`
}

Sass opciones rehegua

Emohenda Bootstrap 4 ore vore mbaꞌekuaarã jeporupyre oñemboguapý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-radius`estilo oñembohekopyréva opaichagua componente rehe.
`$enable-shadows`	`true`térã `false`(por defecto) .	Ombohapéva `box-shadow`estilo oñembohekopyréva opaichagua componente rehe.
`$enable-gradients`	`true`térã `false`(por defecto) .	Ombohapéva gradiente `background-image`oñembohekopyréva estilo rupive opaichagua componente rehe.
`$enable-transitions`	`true`(por defecto) térã`false`	Ombohapéva `transition`s oñembohekopyréva opaichagua componente rehe.
`$enable-hover-media-query`	`true`té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-print-styles`	`true`(por defecto) térã`false`	Ombohapéva umi estilo oñemboheko porãve hag̃ua impresión.

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

Indigo rehegua

Pytãũ

Pytãngy

Pytã

Narã

Sa'yju

Hovyũ

Teal rehegua

Cian 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 colores de 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 Bootstraps scss/_variables.scssvore ryepýpe.

Tenondeguáva

Mokõiha

Ñesẽporã

Ñemongyhyje

Info

Tesakã

Pytũ

Grises rehegua

Peteĩ conjunto expansivo variable gris rehegua ha peteĩ mapa Sass en scss/_variables.scsspara sombras consistentes de gris nde proyecto pukukue javeve.

100 rehegua

200 rehegua

300 rehegua

400 rehegua

500 rehegua

600 rehegua

700 rehegua

800 rehegua

900 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’ã vore’í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 mba’ekuaarã 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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