Sass

Utilitzeu els nostres fitxers Sass d'origen per aprofitar variables, mapes, mixins i funcions per ajudar-vos a crear més ràpidament i personalitzar el vostre projecte.

En aquesta pàgina

Utilitzeu els nostres fitxers Sass d'origen per aprofitar variables, mapes, mixins i molt més.

Estructura del fitxer

Sempre que sigui possible, eviteu modificar els fitxers bàsics de Bootstrap. Per a Sass, això significa crear el vostre propi full d'estil que importi Bootstrap perquè pugueu modificar-lo i ampliar-lo. Suposant que utilitzeu un gestor de paquets com npm, tindreu una estructura de fitxers com aquesta:

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

Si heu baixat els nostres fitxers font i no feu servir un gestor de paquets, voldreu crear manualment alguna cosa semblant a aquesta estructura, mantenint els fitxers font de Bootstrap separats dels vostres.

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

Importació

Al vostre custom.scss, importareu els fitxers Sass d'origen de Bootstrap. Teniu dues opcions: incloure tot Bootstrap o triar les peces que necessiteu. Us animem a aquest últim, encara que tingueu en compte que hi ha alguns requisits i dependències entre els nostres components. També haureu d'incloure una mica de JavaScript per als nostres connectors.

// 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

Amb aquesta configuració al seu lloc, podeu començar a modificar qualsevol de les variables i mapes de Sass al vostre custom.scss. També podeu començar a afegir parts de Bootstrap a la // Optionalsecció segons sigui necessari. Us suggerim que utilitzeu la pila d'importació completa del nostre bootstrap.scssfitxer com a punt de partida.

Valors per defecte de la variable

Cada variable de Sass a Bootstrap inclou la !defaultmarca que us permet anul·lar el valor predeterminat de la variable al vostre propi Sass sense modificar el codi font de Bootstrap. Copieu i enganxeu variables segons sigui necessari, modifiqueu-ne els valors i elimineu la !defaultmarca. Si ja s'ha assignat una variable, no es tornarà a assignar amb els valors predeterminats a Bootstrap.

Trobareu la llista completa de les variables de Bootstrap a scss/_variables.scss. Algunes variables s'estableixen a null, aquestes variables no donen sortida a la propietat tret que s'invalidin a la vostra configuració.

Les substitucions de variables s'han de produir després d'importar les nostres funcions, però abans de la resta de les importacions.

Aquí teniu un exemple que canvia el background-colori colorper al <body>quan s'importa i es compila Bootstrap mitjançant npm:

// 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

Repetiu segons sigui necessari per a qualsevol variable a Bootstrap, incloses les opcions globals següents.

Comenceu amb Bootstrap mitjançant npm amb el nostre projecte inicial! Dirigiu-vos al dipòsit de plantilles twbs/bootstrap-npm-starter per veure com crear i personalitzar Bootstrap al vostre propi projecte npm. Inclou el compilador Sass, l'Autoprefixer, Stylelint, PurgeCSS i les icones Bootstrap.

Mapes i bucles

Bootstrap inclou un grapat de mapes Sass, parells de valors clau que faciliten la generació de famílies de CSS relacionats. Utilitzem mapes Sass per als nostres colors, punts d'interrupció de la quadrícula i molt més. Igual que les variables Sass, tots els mapes Sass inclouen la !defaultbandera i es poden anul·lar i ampliar.

Alguns dels nostres mapes Sass es fusionen en altres buits de manera predeterminada. Això es fa per permetre una fàcil expansió d'un mapa Sass determinat, però té el preu de fer que l'eliminació d'elements d'un mapa sigui una mica més difícil.

Modificar el mapa

Totes les variables del $theme-colorsmapa es defineixen com a variables independents. Per modificar un color existent al nostre $theme-colorsmapa, afegiu el següent al vostre fitxer Sass personalitzat:

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

Més endavant, aquestes variables s'estableixen al $theme-colorsmapa de Bootstrap:

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

Afegeix al mapa

Afegiu colors nous a $theme-colors, o a qualsevol altre mapa, creant un mapa Sass nou amb els vostres valors personalitzats i combinant-lo amb el mapa original. En aquest cas, crearem un $custom-colorsmapa nou i el combinarem amb $theme-colors.

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

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

Eliminar del mapa

Per eliminar colors de $theme-colors, o de qualsevol altre mapa, utilitzeu map-remove. Tingueu en compte que heu d'inserir $theme-colorsentre els nostres requisits just després de la seva definició variablesi abans del seu ús a 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

Claus requerides

Bootstrap assumeix la presència d'algunes claus específiques dins dels mapes de Sass tal com les hem utilitzat i les estem nosaltres mateixos. A mesura que personalitzeu els mapes inclosos, és possible que trobeu errors quan s'utilitzi la clau d'un mapa Sass específic.

Per exemple, fem servir les tecles primary, success, i de per als enllaços, els botons i els estats de formulari. La substitució dels valors d'aquestes claus no hauria de presentar cap problema, però eliminar-les pot provocar problemes de compilació de Sass. En aquests casos, haureu de modificar el codi Sass que fa ús d'aquests valors.danger$theme-colors

Funcions

Colors

Al costat dels mapes Sass que tenim, els colors del tema també es poden utilitzar com a variables autònomes, com ara $primary.

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

Podeu aclarir o enfosquir els colors amb les funcions tint-color()i Bootstrap. shade-color()Aquestes funcions barrejaran colors amb negre o blanc, a diferència de les funcions natives de Sass lighten()i darken()que canviaran la lleugeresa en una quantitat fixa, la qual cosa sovint no condueix a l'efecte desitjat.

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

A la pràctica, cridaries a la funció i passaries els paràmetres de color i pes.

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

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

Contrast de color

Per complir amb els requisits de contrast de les directrius d'accessibilitat de contingut web (WCAG) , els autors han de proporcionar un contrast mínim de color del text de 4,5:1 i un contrast mínim de color no text de 3:1 , amb molt poques excepcions.

Per ajudar amb això, hem inclòs la color-contrastfunció a Bootstrap. Utilitza l' algoritme de relació de contrast WCAG per calcular els llindars de contrast basats en la luminància relativa en un sRGBespai de color per retornar automàticament un color de contrast clar ( #fff), fosc ( #212529) o negre ( #000) en funció del color base especificat. Aquesta funció és especialment útil per a mixins o bucles on esteu generant diverses classes.

Per exemple, per generar mostres de color a partir del nostre $theme-colorsmapa:

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

També es pot utilitzar per a necessitats puntuals de contrast:

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

També podeu especificar un color base amb les nostres funcions de mapa de colors:

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

Escape SVG

Utilitzem la escape-svgfunció per escapar dels caràcters <, >i #per a les imatges de fons SVG. Quan s'utilitza la escape-svgfunció, els URI de dades s'han de citar.

Funcions de suma i resta

Utilitzem les funcions addi subtractper embolicar la calcfunció CSS. 0L'objectiu principal d'aquestes funcions és evitar errors quan es passa un valor "sense unitat" a una calcexpressió. Expressions com calc(10px - 0)retornaran un error a tots els navegadors, tot i ser matemàticament correctes.

Exemple on el calc és vàlid:

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

Exemple on el càlcul no és vàlid:

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

Mixins

El nostre scss/mixins/directori té un munt de mixins que alimenten parts de Bootstrap i també es poden utilitzar en el vostre propi projecte.

Esquemes de colors

Hi ha disponible una combinació d'abreviatura per a la prefers-color-schemeconsulta de mitjans amb suport per a esquemes de colors light, , i personalitzats.dark

@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
  }
}