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.

På den här sidan

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 skapa 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";

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

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

Upprepa vid behov för valfri variabel i Bootstrap, inklusive de globala alternativen nedan.

Kom igång med Bootstrap via npm med vårt startprojekt! Gå till mallförrådet twbs/bootstrap-npm-starter för att se hur du bygger och anpassar Bootstrap i ditt eget npm-projekt. Inkluderar Sass-kompilator, Autoprefixer, Stylelint, PurgeCSS och Bootstrap-ikoner.

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 $theme-colorsmellan våra krav precis efter dess definition i variablesoch före dess användning i 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

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 kontrastkraven för webbinnehållstillgänglighetsriktlinjerna (WCAG) måste författare tillhandahålla en minsta textfärgkontrast på 4,5:1 och en lägsta färgkontrast som inte är text på 3:1 , med mycket få undantag.

För att hjälpa till med detta inkluderade vi color-contrastfunktionen i Bootstrap. Den använder WCAG-kontrastförhållandealgoritmen 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
  }
}