Sass
Bruk Sass-kildefilene våre for å dra nytte av variabler, kart, mixins og funksjoner for å hjelpe deg med å bygge raskere og tilpasse prosjektet ditt.
Bruk Sass-kildefilene våre for å dra nytte av variabler, kart, mixins og mer.
Filstruktur
Når det er mulig, unngå å endre Bootstraps kjernefiler. For Sass betyr det å lage ditt eget stilark som importerer Bootstrap slik at du kan endre og utvide det. Forutsatt at du bruker en pakkebehandling som npm, vil du ha en filstruktur som ser slik ut:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Hvis du har lastet ned kildefilene våre og ikke bruker en pakkebehandling, vil du manuelt sette opp noe som ligner på den strukturen, og holde Bootstraps kildefiler atskilt fra dine egne.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importerer
I din custom.scssvil du importere Bootstraps kilde Sass-filer. Du har to alternativer: ta med hele Bootstrap, eller velg delene du trenger. Vi oppfordrer sistnevnte, men vær oppmerksom på at det er noen krav og avhengigheter på tvers av komponentene våre. Du må også inkludere litt JavaScript for våre 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Med det oppsettet på plass kan du begynne å endre alle Sass-variablene og kartene i custom.scss. Du kan også begynne å legge til deler av Bootstrap under // Optionalseksjonen etter behov. Vi foreslår at du bruker hele importstabelen fra bootstrap.scssfilen vår som utgangspunkt.
Variable standardinnstillinger
Hver Sass-variabel i Bootstrap inkluderer !defaultflagget som lar deg overstyre variabelens standardverdi i din egen Sass uten å endre Bootstraps kildekode. Kopier og lim inn variabler etter behov, endre verdiene og fjern !defaultflagget. Hvis en variabel allerede er tildelt, vil den ikke bli tildelt på nytt av standardverdiene i Bootstrap.
Du finner den komplette listen over Bootstraps variabler i scss/_variables.scss. Noen variabler er satt til null, disse variablene gir ikke ut egenskapen med mindre de er overstyrt i konfigurasjonen din.
Variabeloverstyringer må komme etter at funksjonene våre er importert, men før resten av importene.
Her er et eksempel som endrer background-colorog colorfor <body>når du importerer og kompilerer 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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Gjenta etter behov for en hvilken som helst variabel i Bootstrap, inkludert de globale alternativene nedenfor.
Kart og løkker
Bootstrap inkluderer en håndfull Sass-kart, nøkkelverdipar som gjør det enklere å generere familier med relatert CSS. Vi bruker Sass-kart for våre farger, rutenettbrytepunkter og mer. Akkurat som Sass-variabler, inkluderer alle Sass-kart !defaultflagget og kan overstyres og utvides.
Noen av våre Sass-kart er slått sammen til tomme kart som standard. Dette gjøres for å tillate enkel utvidelse av et gitt Sass-kart, men kommer på bekostning av å gjøre det litt vanskeligere å fjerne elementer fra et kart.
Endre kart
Alle variabler i $theme-colorskartet er definert som frittstående variabler. For å endre en eksisterende farge i $theme-colorskartet vårt, legg til følgende i din egendefinerte Sass-fil:
$primary: #0074d9;
$danger: #ff4136;
Senere settes disse variablene i Bootstraps $theme-colorskart:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Legg til kart
Legg til nye farger på $theme-colors, eller et hvilket som helst annet kart, ved å lage et nytt Sass-kart med dine egendefinerte verdier og slå det sammen med det originale kartet. I dette tilfellet oppretter vi et nytt $custom-colorskart og slår det sammen med $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Fjern fra kartet
For å fjerne farger fra $theme-colorseller andre kart, bruk map-remove. Vær oppmerksom på at du må sette den inn mellom våre krav og alternativer:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Nødvendige nøkler
Bootstrap antar tilstedeværelsen av noen spesifikke nøkler i Sass-kart slik vi brukte og utvider disse selv. Når du tilpasser de inkluderte kartene, kan du støte på feil der nøkkelen til en bestemt Sass-kart brukes.
For eksempel bruker vi tastene primary, success, og dangerfra $theme-colorsfor lenker, knapper og skjematilstander. Å erstatte verdiene til disse nøklene bør ikke by på problemer, men fjerning av dem kan føre til Sass-kompileringsproblemer. I disse tilfellene må du endre Sass-koden som bruker disse verdiene.
Funksjoner
Farger
Ved siden av Sass-kartene vi har, kan temafarger også brukes som frittstående variabler, som $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Du kan lysne eller mørkere farger med Bootstraps tint-color()og shade-color()funksjoner. Disse funksjonene vil blande farger med svart eller hvitt, i motsetning til Sass' native lighten()og darken()funksjoner som vil endre lysheten med en fast mengde, som ofte ikke fører til ønsket effekt.
// 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));
}
I praksis vil du kalle funksjonen og sende inn farge- og vektparametrene.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Fargekontrast
For å oppfylle WCAG 2.0-tilgjengelighetsstandarder for fargekontrast , må forfattere gi et kontrastforhold på minst 4,5:1 , med svært få unntak.
En tilleggsfunksjon vi inkluderer i Bootstrap er fargekontrastfunksjonen, color-contrast. Den bruker WCAG 2.0-algoritmen for å beregne kontrastterskler basert på relativ luminans i et sRGBfargerom for automatisk å returnere en lys ( #fff), mørk ( #212529) eller svart ( #000) kontrastfarge basert på den angitte grunnfargen. Denne funksjonen er spesielt nyttig for mixins eller looper der du genererer flere klasser.
For eksempel, for å generere fargeprøver fra $theme-colorskartet vårt:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Den kan også brukes til engangskontrastbehov:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Du kan også spesifisere en grunnfarge med våre fargekartfunksjoner:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Unngå SVG
Vi bruker escape-svgfunksjonen for å unnslippe tegnene <, >og #for SVG-bakgrunnsbilder. Ved bruk av escape-svgfunksjonen må data-URIer oppgis.
Legge til og trekke fra funksjoner
Vi bruker funksjonene addog subtracttil å pakke inn CSS- calcfunksjonen. Hovedformålet med disse funksjonene er å unngå feil når en "enhetsløs" 0verdi overføres til et calcuttrykk. Uttrykk som calc(10px - 0)vil returnere en feil i alle nettlesere, til tross for at de er matematisk korrekte.
Eksempel hvor beregningen er gyldig:
$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);
}
Eksempel der beregningen er ugyldig:
$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
Katalogen vår scss/mixins/har massevis av mixins som driver deler av Bootstrap og kan også brukes på tvers av ditt eget prosjekt.
Fargevalg
En stenografimiks for mediespørringen prefers-color-schemeer tilgjengelig med støtte for light, dark, og tilpassede fargeskjemaer.
@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
}
}