Sass
Brug vores Sass-kildefiler til at drage fordel af variabler, kort, mixins og funktioner til at hjælpe dig med at bygge hurtigere og tilpasse dit projekt.
Brug vores Sass-kildefiler til at drage fordel af variabler, kort, mixins og mere.
Filstruktur
Når det er muligt, undgå at ændre Bootstraps kernefiler. For Sass betyder det at oprette dit eget stylesheet, der importerer Bootstrap, så du kan ændre og udvide det. Hvis du antager, at du bruger en pakkehåndtering som npm, vil du have en filstruktur, der ser sådan ud:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Hvis du har downloadet vores kildefiler og ikke bruger en pakkehåndtering, vil du manuelt opsætte noget, der ligner den struktur, og holde Bootstraps kildefiler adskilt 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 muligheder: medtag hele Bootstrap, eller vælg de dele, du har brug for. Vi opfordrer til sidstnævnte, men vær opmærksom på, at der er nogle krav og afhængigheder på tværs af vores komponenter. Du skal også inkludere noget JavaScript til vores 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
Med den opsætning på plads kan du begynde at ændre enhver af Sass-variablerne og -kortene i din custom.scss. Du kan også begynde at tilføje dele af Bootstrap under // Optionalsektionen efter behov. Vi foreslår, at du bruger den fulde importstak fra vores bootstrap.scssfil som dit udgangspunkt.
Variable standardindstillinger
Hver Sass-variabel i Bootstrap inkluderer !defaultflaget, der giver dig mulighed for at tilsidesætte variablens standardværdi i din egen Sass uden at ændre Bootstraps kildekode. Kopier og indsæt variabler efter behov, rediger deres værdier, og fjern !defaultflaget. Hvis en variabel allerede er blevet tildelt, vil den ikke blive gentildelt af standardværdierne i Bootstrap.
Du finder den komplette liste over Bootstraps variabler i scss/_variables.scss. Nogle variabler er indstillet til null, disse variabler udsender ikke egenskaben, medmindre de er tilsidesat i din konfiguration.
Variable tilsidesættelser skal komme efter vores funktioner er importeret, men før resten af importen.
Her er et eksempel, der ændrer 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";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Gentag efter behov for enhver variabel i Bootstrap, inklusive de globale muligheder nedenfor.
Kort og sløjfer
Bootstrap inkluderer en håndfuld Sass-kort, nøgleværdipar, der gør det nemmere at generere familier af relateret CSS. Vi bruger Sass-kort til vores farver, gitterbrudpunkter og mere. Ligesom Sass-variabler inkluderer alle Sass-kort !defaultflaget og kan tilsidesættes og udvides.
Nogle af vores Sass-kort er som standard flettet sammen til tomme kort. Dette gøres for at tillade let udvidelse af et givet Sass-kort, men det koster det at gøre det lidt vanskeligere at fjerne elementer fra et kort.
Rediger kort
Alle variabler i $theme-colorskortet er defineret som selvstændige variable. For at ændre en eksisterende farve på vores $theme-colorskort skal du tilføje følgende til din tilpassede Sass-fil:
$primary: #0074d9;
$danger: #ff4136;
Senere indstilles disse variabler i Bootstraps $theme-colorskort:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Tilføj til kort
Tilføj nye farver til $theme-colors, eller et hvilket som helst andet kort, ved at oprette et nyt Sass-kort med dine brugerdefinerede værdier og flette det sammen med det originale kort. I dette tilfælde vil vi oprette et nyt $custom-colorskort og flette det 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 kortet
For at fjerne farver fra $theme-colorseller et hvilket som helst andet kort, brug map-remove. Vær opmærksom på, at du skal indsætte det mellem vores krav og muligheder:
// 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
Nødvendige nøgler
Bootstrap antager tilstedeværelsen af nogle specifikke nøgler i Sass-kort, da vi brugte og udvider disse selv. Når du tilpasser de inkluderede kort, kan du støde på fejl, hvor en specifik Sass-kortnøgle bliver brugt.
For eksempel bruger vi tasterne primary, success, og dangerfra $theme-colorstil links, knapper og formulartilstande. Udskiftning af værdierne for disse nøgler skulle ikke give nogen problemer, men fjernelse af dem kan forårsage problemer med Sass-kompilering. I disse tilfælde skal du ændre den Sass-kode, der gør brug af disse værdier.
Funktioner
Farver
Udover de Sass-kort , vi har, kan temafarver også bruges som selvstændige variable, som f.eks $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Du kan gøre farver lysere eller mørkere med Bootstraps tint-color()og shade-color()funktioner. Disse funktioner vil blande farver med sort eller hvid, i modsætning til Sass' native lighten()og darken()funktioner, som vil ændre lysstyrken med en fast mængde, hvilket ofte ikke fører til den ønskede 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 ville du kalde funktionen og sende farve- og vægtparametrene.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Farvekontrast
For at opfylde WCAG 2.0-tilgængelighedsstandarderne for farvekontrast skal forfattere angive et kontrastforhold på mindst 4,5:1 med meget få undtagelser.
En ekstra funktion, vi inkluderer i Bootstrap, er farvekontrastfunktionen, color-contrast. Den bruger WCAG 2.0-algoritmen til at beregne kontrasttærskler baseret på relativ luminans i et sRGBfarverum for automatisk at returnere en lys ( #fff), mørk ( #212529) eller sort ( #000) kontrastfarve baseret på den angivne grundfarve. Denne funktion er især nyttig til mixins eller loops, hvor du genererer flere klasser.
For eksempel, for at generere farveprøver fra vores $theme-colorskort:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Den kan også bruges til engangskontrastbehov:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Du kan også angive en grundfarve med vores farvekortfunktioner:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Undslip SVG
Vi bruger escape-svgfunktionen til at undslippe tegnene <, >og #til SVG-baggrundsbilleder. Ved brug af escape-svgfunktionen skal data-URI'er angives.
Tilføj og subtraher funktioner
Vi bruger funktionerne addog subtracttil at ombryde CSS- calcfunktionen. Det primære formål med disse funktioner er at undgå fejl, når en "enhedsløs" 0værdi overføres til et calcudtryk. Udtryk som calc(10px - 0)vil returnere en fejl i alle browsere, selvom 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 hvor 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
Vores scss/mixins/bibliotek har et væld af mixins, der driver dele af Bootstrap og kan også bruges på tværs af dit eget projekt.
Farveskemaer
En stenografiblanding til prefers-color-schememedieforespørgslen er tilgængelig med understøttelse af light, dark, og brugerdefinerede farveskemaer.
@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
}
}