Sass
Aduprate i nostri fugliali Sass fonte per prufittà di variabili, carte, mixin è funzioni per aiutà vi custruisce più veloce è persunalizà u vostru prughjettu.
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 cunfigurà manualmente qualcosa simile à quella struttura, mantenendu i fugliali 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";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.
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 trà e nostre esigenze è opzioni:
// 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";
// 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 standard di accessibilità WCAG 2.0 per u cuntrastu di culore , l'autori devenu furnisce un rapportu di cuntrastu di almenu 4.5: 1 , cù assai pochi eccezzioni.
Una funzione supplementaria chì includemu in Bootstrap hè a funzione di cuntrastu di culore, color-contrast. Utiliza l' algoritmu WCAG 2.0 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 mixin 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
}
}