Sass

Aduprate i nostri fugliali Sass fonte per prufittà di variabili, carte, mixin, è funzioni per aiutà vi custruisce più veloce è persunalizà u vostru prughjettu.

In sta pagina

Aduprate i nostri fugliali Sass fonte per prufittà di variabili, carte, mixin, è più.

Struttura di u schedariu

Sempre chì hè pussibule, evite micca di mudificà i schedarii core di Bootstrap. Per Sass, questu significa creà u vostru propiu fogliu di stile chì importa Bootstrap per pudè mudificà è allargà. Assumindu chì avete aduprà un gestore di pacchetti cum'è npm, avarete una struttura di schedari chì pare cusì:

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

Sè avete scaricatu i nostri fugliali fonte è ùn sò micca aduprendu un gestore di pacchetti, vi vulete creà manualmente qualcosa simili à quella struttura, mantenendu i schedarii fonte di Bootstrap separati da i vostri.

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

Importazione

In u vostru custom.scss, impurtate i schedarii Sass fonte di Bootstrap. Avete duie opzioni: include tuttu Bootstrap, o sceglite e parti chì avete bisognu. Incuragemu l'ultime, ancu s'ellu sia cuscenti chì ci sò alcuni requisiti è dipendenze in i nostri cumpunenti. Avete ancu bisognu di include JavaScript per i nostri plugins.

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

Cù sta cunfigurazione in u locu, pudete inizià à mudificà qualsiasi variabili è carte Sass in u vostru custom.scss. Pudete ancu principià à aghjunghje parti di Bootstrap sottu a // Optionalsezione cum'è necessariu. Suggeremu di utilizà a pila d'importazione cumpleta da u nostru bootstrap.scssschedariu cum'è u vostru puntu di partenza.

Predefiniti variabili

Ogni variabile Sass in Bootstrap include a !defaultbandiera chì vi permette di annullà u valore predeterminatu di a variabile in u vostru propiu Sass senza mudificà u codice fonte di Bootstrap. Copia è incollà e variàbili cum'è necessariu, mudificà i so valori, è sguassate a !defaultbandiera. Se una variabile hè digià stata assignata, allora ùn serà micca riassignata da i valori predeterminati in Bootstrap.

Truverete a lista completa di e variàbili di Bootstrap in scss/_variables.scss. Alcune variabili sò imposte à null, sti variàbili ùn emettenu micca a pruprietà, salvu ch'elli sò rimpiazzati in a vostra cunfigurazione.

L'annullamentu di variabile deve vene dopu chì e nostre funzioni sò impurtate, ma prima di u restu di l'impurtazioni.

Eccu un esempiu chì cambia u background-colorè colorper <body>quandu importa è compilate Bootstrap via 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

Repetite quantu necessariu per qualsiasi variabile in Bootstrap, cumprese l'opzioni glubale sottu.

Cuminciate cù Bootstrap via npm cù u nostru prughjettu di partenza! Testa à u repository di mudelli twbs/bootstrap-npm-starter per vede cumu custruisce è persunalizà Bootstrap in u vostru propiu prughjettu npm. Include compilatore Sass, Autoprefixer, Stylelint, PurgeCSS è Icone Bootstrap.

Mapi è loops

Bootstrap include una manciata di carte Sass, coppie di valori chjave chì facenu più faciule per generà famiglie di CSS rilativi. Utilizemu carte Sass per i nostri culori, punti di rottura di griglia, è più. Cum'è e variabili Sass, tutte e carte Sass includenu a !defaultbandiera è ponu esse rimpiazzate è allargate.

Alcune di e nostre carte Sass sò unificate in quelli vacanti per difettu. Questu hè fattu per permette l'espansione faciule di una carta Sass data, ma vene à u costu di fà caccià l' articuli da una mappa un pocu più difficiule.

Mudificà a mappa

Tutte e variàbili in a $theme-colorsmappa sò definite cum'è variàbili standalone. Per mudificà un culore esistente in a nostra $theme-colorsmappa, aghjunghje i seguenti à u vostru schedariu Sass persunalizatu:

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

Più tardi, sti variàbili sò stabiliti in a mappa di Bootstrap $theme-colors:

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

Aghjunghjite à a mappa

Aghjunghjite novi culori à $theme-colors, o qualsiasi altra mappa, creendu una nova mappa Sass cù i vostri valori persunalizati è unendula cù a mappa originale. In questu casu, creeremu una nova $custom-colorsmappa è fusiona cù $theme-colors.

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

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

Eliminate da a mappa

Per sguassà i culori da $theme-colors, o qualsiasi altra mappa, utilizate map-remove. Siate cuscenti chì duvete inserisce $theme-colorstrà e nostre esigenze ghjustu dopu a so definizione in variablesè prima di u so usu in 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

Chjavi richiesti

Bootstrap assume a presenza di alcune chjavi specifiche in e carte Sass cum'è avemu usatu è estendemu sti stessi. Cumu persunalizà e carte incluse, pudete scuntrà errori induve una chjave specifica di a mappa Sass hè stata aduprata.

Per esempiu, usemu i primary, successè i dangerchjavi da $theme-colorsper i ligami, i buttoni è i stati di forma. A rimpiazzà i valori di sti chjavi ùn deve esse micca prublemi, ma sguassate pò causà prublemi di compilazione Sass. In questi casi, avete bisognu di mudificà u codice Sass chì face usu di quelli valori.

Funzioni

Culori

Accantu à e carte Sass chì avemu, i culori di u tema pò ancu esse usatu cum'è variabili standalone, cum'è $primary.

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

Pudete alluminà o scurisce i culori cù Bootstrap tint-color()è shade-color()funzioni. Queste funzioni mischjeranu i culori cù u neru o u biancu, à u cuntrariu di u nativu di Sass lighten()è e darken()funzioni chì cambianu a ligerezza da una quantità fissa, chì spessu ùn porta micca à l'effettu desideratu.

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

In pratica, chjamà a funzione è passà in i paràmetri di culore è pesu.

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

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

Cuntrastu di culore

Per risponde à i requisiti di cuntrastu di e Linee di l' accessibilità di u cuntenutu Web (WCAG) , l'autori devenu furnisce un cuntrastu minimu di culore di testu di 4.5: 1 è un cuntrastu minimu di culore di u testu di 3: 1 , cù assai pochi eccezzioni.

Per aiutà cù questu, avemu inclusu a color-contrastfunzione in Bootstrap. Utiliza l' algoritmu di cuntrastu WCAG per calculà i soglia di cuntrastu basatu nantu à a luminanza relativa in un sRGBspaziu di culore per rinvià automaticamente un culore di cuntrastu chjaru ( #fff), scuru ( #212529) o neru ( #000) basatu annantu à u culore di basa specificatu. Questa funzione hè particularmente utile per mixin o loops induve generate parechje classi.

Per esempiu, per generà campioni di culore da a nostra $theme-colorsmappa:

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

Pò esse ancu usatu per esigenze di cuntrastu una volta:

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

Pudete ancu specificà un culore di basa cù e nostre funzioni di mappa di culore:

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

Scappa SVG

Utilizemu a escape-svgfunzione per scappà da i caratteri <, >è #per l'imagine di fondo SVG. Quandu si usa a escape-svgfunzione, l'URI di dati deve esse citati.

Funzioni aghjunghje è sottrae

Utilizemu adde subtractfunzioni per imbulighjà a funzione CSS calc. U scopu primariu di queste funzioni hè di evità l'errori quandu un valore "senza unità" 0hè passatu in una calcespressione. Espressioni cum'è calc(10px - 0)vultà un errore in tutti i navigatori, malgradu esse matematicamente curretti.

Esempiu induve u calc hè validu:

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

Esempiu induve u calc hè invalidu:

$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

U nostru scss/mixins/annuariu hà una tonna di mixins chì putenza parti di Bootstrap è pò ancu esse usatu in u vostru propiu prughjettu.

Schemi di culori

Un mixin shorthand per a prefers-color-schemedumanda di media hè dispunibule cù supportu per light, dark, è schemi di culori persunalizati.

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