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.

På denne side

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

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

Gentag efter behov for enhver variabel i Bootstrap, inklusive de globale muligheder nedenfor.

Kom i gang med Bootstrap via npm med vores startprojekt! Gå til twbs/bootstrap-npm-starter skabelonlageret for at se, hvordan du bygger og tilpasser Bootstrap i dit eget npm-projekt. Inkluderer Sass-kompiler, Autoprefixer, Stylelint, PurgeCSS og Bootstrap-ikoner.

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 kommer på bekostning af 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 $theme-colorsmellem vores krav lige efter dets definition i variablesog før dets brug 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ø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 burde 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 kontrastkravene til Web Content Accessibility Guidelines (WCAG) skal forfattere angive en minimum tekstfarvekontrast på 4,5:1 og en minimum ikke-tekstfarvekontrast på 3:1 , med meget få undtagelser.

For at hjælpe med dette inkluderede vi color-contrastfunktionen i Bootstrap. Den bruger WCAG-kontrastforholdsalgoritmen 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
  }
}