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.

På denne siden

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

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

Gjenta etter behov for en hvilken som helst variabel i Bootstrap, inkludert de globale alternativene nedenfor.

Kom i gang med Bootstrap via npm med vårt startprosjekt! Gå til twbs/bootstrap-npm-starter-mallageret for å se hvordan du bygger og tilpasser Bootstrap i ditt eget npm-prosjekt. Inkluderer Sass-kompilator, Autoprefixer, Stylelint, PurgeCSS og Bootstrap-ikoner.

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 inn $theme-colorsmellom kravene våre like etter definisjonen i variablesog før bruken 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ø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 kontrastkravene til Web Content Accessibility Guidelines (WCAG) , må forfattere oppgi en minimum tekstfargekontrast på 4,5:1 og en minimum fargekontrast uten tekst på 3:1 , med svært få unntak.

For å hjelpe med dette inkluderte vi color-contrastfunksjonen i Bootstrap. Den bruker WCAG-kontrastforholdsalgoritmen 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
  }
}