Sass
Använd våra Sass-källfiler för att dra fördel av variabler, kartor, mixins och funktioner för att hjälpa dig bygga snabbare och anpassa ditt projekt.
Använd våra Sass-källfiler för att dra fördel av variabler, kartor, mixins och mer.
Filstruktur
Undvik att ändra Bootstraps kärnfiler när det är möjligt. För Sass betyder det att du skapar din egen stilmall som importerar Bootstrap så att du kan ändra och utöka den. Förutsatt att du använder en pakethanterare som npm, kommer du att ha en filstruktur som ser ut så här:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Om du har laddat ner våra källfiler och inte använder en pakethanterare, vill du manuellt ställa in något som liknar den strukturen och hålla Bootstraps källfiler åtskilda från dina egna.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importerar
I din custom.scsskommer du att importera Bootstraps käll Sass-filer. Du har två alternativ: inkludera hela Bootstrap, eller välj de delar du behöver. Vi uppmuntrar det senare, men var medveten om att det finns vissa krav och beroenden mellan våra komponenter. Du måste också inkludera lite JavaScript för våra 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 inställningen på plats kan du börja modifiera någon av Sass-variablerna och kartorna i din custom.scss. Du kan också börja lägga till delar av Bootstrap under // Optionalavsnittet efter behov. Vi föreslår att du använder hela importstacken från vår bootstrap.scssfil som utgångspunkt.
Variable standardvärden
Varje Sass-variabel i Bootstrap innehåller !defaultflaggan som gör att du kan åsidosätta variabelns standardvärde i din egen Sass utan att ändra Bootstraps källkod. Kopiera och klistra in variabler efter behov, ändra deras värden och ta bort !defaultflaggan. Om en variabel redan har tilldelats kommer den inte att omtilldelas av standardvärdena i Bootstrap.
Du hittar hela listan över Bootstraps variabler i scss/_variables.scss. Vissa variabler är inställda på null, dessa variabler matar inte ut egenskapen om de inte åsidosätts i din konfiguration.
Variabelöverstyrningar måste komma efter att våra funktioner har importerats, men före resten av importerna.
Här är ett exempel som ändrar background-coloroch colorför <body>när du importerar och kompilerar 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
Upprepa vid behov för valfri variabel i Bootstrap, inklusive de globala alternativen nedan.
Kartor och slingor
Bootstrap innehåller en handfull Sass-kartor, nyckelvärdespar som gör det lättare att generera familjer av relaterad CSS. Vi använder Sass-kartor för våra färger, rutnätsbrytpunkter och mer. Precis som Sass-variabler inkluderar alla Sass-kartor !defaultflaggan och kan åsidosättas och utökas.
Vissa av våra Sass-kartor slås ihop till tomma kartor som standard. Detta görs för att möjliggöra enkel utökning av en given Sass-karta, men kommer till priset av att det blir lite svårare att ta bort föremål från en karta.
Ändra karta
Alla variabler i $theme-colorskartan definieras som fristående variabler. För att ändra en befintlig färg i vår $theme-colorskarta, lägg till följande i din anpassade Sass-fil:
$primary: #0074d9;
$danger: #ff4136;
Senare ställs dessa variabler in i Bootstraps $theme-colorskarta:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Lägg till på kartan
Lägg till nya färger till $theme-colors, eller någon annan karta, genom att skapa en ny Sass-karta med dina anpassade värden och slå samman den med den ursprungliga kartan. I det här fallet skapar vi en ny $custom-colorskarta och slår samman den med $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Ta bort från kartan
För att ta bort färger från $theme-colorseller någon annan karta, använd map-remove. Tänk på att du måste infoga den mellan våra krav och alternativ:
// 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ödvändiga nycklar
Bootstrap förutsätter närvaron av vissa specifika nycklar inom Sass-kartor som vi använde och utökar dessa själva. När du anpassar de medföljande kartorna kan du stöta på fel där en specifik Sass-kartas nyckel används.
Till exempel använder vi tangenterna primary, success, och dangerfrån $theme-colorsför länkar, knappar och formulärtillstånd. Att ersätta värdena för dessa nycklar bör inte ge några problem, men att ta bort dem kan orsaka Sass-kompileringsproblem. I dessa fall måste du ändra Sass-koden som använder dessa värden.
Funktioner
Färger
Utöver de Sass-kartor vi har kan temafärger också användas som fristående variabler, som $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Du kan göra färgerna ljusare eller mörkare med Bootstraps tint-color()och shade-color()funktioner. Dessa funktioner kommer att blanda färger med svart eller vitt, till skillnad från Sass inbyggda lighten()och darken()funktioner som kommer att ändra ljusheten med en fast mängd, vilket ofta inte leder till önskad 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 praktiken skulle du anropa funktionen och skicka in parametrarna för färg och vikt.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Färgkontrast
För att uppfylla WCAG 2.0 tillgänglighetsstandarder för färgkontrast måste författare tillhandahålla ett kontrastförhållande på minst 4,5:1 , med mycket få undantag.
En ytterligare funktion vi inkluderar i Bootstrap är färgkontrastfunktionen, color-contrast. Den använder WCAG 2.0-algoritmen för att beräkna kontrasttrösklar baserat på relativ luminans i en sRGBfärgrymd för att automatiskt returnera en ljus ( #fff), mörk ( #212529) eller svart ( #000) kontrastfärg baserat på den angivna basfärgen. Den här funktionen är särskilt användbar för mixins eller loopar där du genererar flera klasser.
Till exempel, för att generera färgprover från vår $theme-colorskarta:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Den kan också användas för engångskontrastbehov:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Du kan också ange en grundfärg med våra färgkartfunktioner:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
Vi använder escape-svgfunktionen för att escape <, >och #tecknen för SVG-bakgrundsbilder. Vid användning av escape-svgfunktionen måste data-URI:er anges.
Addera och subtrahera funktioner
Vi använder funktionerna addoch subtractför att omsluta CSS- calcfunktionen. Det primära syftet med dessa funktioner är att undvika fel när ett "enhetslöst" 0värde överförs till ett calcuttryck. Uttryck som calc(10px - 0)kommer att returnera ett fel i alla webbläsare, trots att de är matematiskt korrekta.
Exempel där beräkningen är giltig:
$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);
}
Exempel där beräkningen är ogiltig:
$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
Vår scss/mixins/katalog har massor av mixins som driver delar av Bootstrap och kan också användas i ditt eget projekt.
Färgscheman
En stenografiblandning för prefers-color-schememediefrågan är tillgänglig med stöd för light, dark, och anpassade färgscheman.
@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
}
}