Ejupi contenido principal-pe Eike docs jeguatahápe
Check
in English

Sass rehegua

Eipuru ore vore Sass ypykue rehegua eipuru hag̃ua mbaꞌekuaarã, mapa, mixin ha tembiaporã nepytyvõ hag̃ua emopuꞌa pyaꞌeve ha emohenda hag̃ua ne proyecto.

Ko páhinape

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, emoheñóise nde po rupive peteĩ mba’e ojoguáva upe estructura-pe, eñongatu Bootstrap rembiapokue ypykue aparte nde mba’égui.

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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

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ĩ mboajepyréva oñemboguapýva null, ko’ã mba’e’oka ndoguerúi mba’ekuaarã ndojehejareíriramo ne ñembohekorãme.

Umi ñemboyke variable rehegua ouvaꞌerã ñande funciónkuéra ojegueru rire, ha katu umi importación 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:

// Required
@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/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@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 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

Opaite mbaꞌekuaarã oĩva $theme-colorsmapa-pe oñemboheko mbaꞌekuaarã ijeheguigua ramo. Emoambue hag̃ua peteĩ sa’y oĩmava ore $theme-colorsmapa-pe, emoĩ ko’ãva ne rembiapokue Sass jeporupyre-pe:

$primary: #0074d9;
$danger: #ff4136;

Upe rire, koꞌã mbaꞌekuaarã oñemohenda Bootstrap $theme-colorsmapa-pe:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Oñemoĩve mapa-pe

Emoĩ sa’y pyahu $theme-colors, térã oimeraẽ ambue mapa-pe, emoheñóivo peteĩ mapa Sass pyahu ne mba’ekuaarã jeporupyre reheve ha embojoaju mapa ypykue ndive. Ko kásope, jajapóta peteĩ $custom-colorsmapa pyahu ha ñambojoaju $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

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 emoinge va’erã $theme-colorsore mba’ejerure apytépe oñemboheko riremínte variablesha ojepuru mboyve maps:

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

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

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

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

Umi sa’ykuéra

Umi mapa Sass jaguerekóva ykére, umi tema saꞌi ikatu avei ojepuru variable independiente ramo, haꞌeháicha $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Ikatu emohesakã térã emoypytũ umi sa’y Bootstrap’s tint-color()ha shade-color()tembiaporã rupive. Koꞌã tembiaporã ombojeheꞌavaꞌerã saꞌi morotĩ térã morotĩva ndive, ojoavy Sass nativo lighten()ha darken()tembiaporã omoambuétava tesape peteĩ cantidad fija rupive, heta jey ndoguerahái efecto ojeipotávape.

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

En la práctica, rehenóita pe función ha rehasa umi parámetro color ha peso rehegua.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Contraste de color rehegua

Oñembohovái hag̃ua umi mbaꞌe ojejeruréva joavy jehaipyre jehaipyre rehegua (WCAG) , umi haihára omeꞌevaꞌerã peteĩ jehaipyre saꞌi joavy michĩvéva 4.5:1 ha peteĩ jehaipyre saꞌi joavy michĩvéva 3:1 , saꞌieterei excepción reheve.

Oipytyvõ hag̃ua kóvape, romoĩkuri color-contrasttembiaporã Bootstrap-pe. Oipuru algoritmo WCAG contraste relación rehegua okalkula hag̃ua umi umbral contraste rehegua oñemopyendáva luminancia relativa rehe peteĩ sRGBespacio color-pe ombojevy hag̃ua ijeheguiete peteĩ color contraste tesape ( #fff), iñypytũva ( #212529) térã morotĩ ( #000) 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-contrast($value);
  }
}

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

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

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

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Okañy SVG-gui

Jaipuru escape-svgtembiaporã jajehekýi hag̃ua <, >ha #karameg̃ua SVG taꞌãngamýi tapykueguápe g̃uarã. 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);
}

Mixin-kuéra rehegua

Ore scss/mixins/directorio oguereko peteĩ tonelada mixins omombaretéva Bootstrap pehẽngue ha ikatu avei ojepuru nde proyecto tee rupi.

Umi esquema de colores rehegua

Peteĩ mixin taquigrafía rehegua prefers-color-schemeñeporandu medio rehegua ojeguereko pytyvõ reheve light, dark, ha esquema color personalizado rehegua.

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}