Sass

Brûk ús boarne Sass-bestannen om te profitearjen fan fariabelen, kaarten, mixins en funksjes om jo te helpen rapper te bouwen en jo projekt oan te passen.

Op dizze side

Brûk ús boarne Sass-bestannen om te profitearjen fan fariabelen, kaarten, mixins, en mear.

Triemstruktuer

Foarkom it wizigjen fan Bootstrap's kearnbestannen wannear mooglik. Foar Sass betsjut dat it meitsjen fan jo eigen stylblêd dat Bootstrap ymportearret sadat jo it kinne wizigje en útwreidzje. Oannommen dat jo in pakketbehearder lykas npm brûke, sille jo in bestânstruktuer hawwe dy't der sa útsjocht:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

As jo ús boarnebestannen hawwe ynladen en gjin pakketbehearder brûke, wolle jo manuell iets meitsje dat ferlykber is mei dy struktuer, en de boarnebestannen fan Bootstrap apart fan jo eigen hâlde.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Ymportearje

Yn jo custom.scsssille jo Bootstrap's boarne Sass-bestannen ymportearje. Jo hawwe twa opsjes: befetsje alle Bootstrap, of kies de dielen dy't jo nedich binne. Wy stimulearje dat lêste, hoewol bewust wêze dat d'r wat easken en ôfhinklikens binne oer ús komponinten. Jo sille ek wat JavaScript moatte opnimme foar ús 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

Mei dy opset yn plak, kinne jo begjinne te wizigjen ien fan de Sass fariabelen en kaarten yn jo custom.scss. Jo kinne ek begjinne te foegjen dielen fan Bootstrap ûnder de // Optionalseksje as nedich. Wy stelle foar om de folsleine ymportstapel út ús bootstrap.scssbestân te brûken as jo útgongspunt.

Fariabele standerts

Elke Sass-fariabele yn Bootstrap omfettet de !defaultflagge wêrtroch jo de standertwearde fan 'e fariabele yn jo eigen Sass kinne oerskriuwe sûnder de boarnekoade fan Bootstrap te feroarjen. Kopiearje en plakke fariabelen as nedich, wizigje har wearden en ferwiderje de !defaultflagge. As in fariabele al is tawiisd, dan sil it net opnij wurde tawiisd troch de standertwearden yn Bootstrap.

Jo sille de folsleine list fan Bootstrap's fariabelen fine yn scss/_variables.scss. Guon fariabelen binne ynsteld op null, dizze fariabelen jouwe it pân net út, útsein as se yn jo konfiguraasje oerskreaun wurde.

Fariabele oerienkomsten moatte komme neidat ús funksjes ymporteare binne, mar foar de rest fan 'e ymporten.

Hjir is in foarbyld dat de background-coloren feroaret by colorit <body>ymportearjen en kompilearjen fan Bootstrap fia 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

Werhelje as nedich foar elke fariabele yn Bootstrap, ynklusyf de globale opsjes hjirûnder.

Begjin mei Bootstrap fia npm mei ús startersprojekt! Gean nei it twbs/bootstrap-npm-starter template repository om te sjen hoe't jo Bootstrap kinne bouwe en oanpasse yn jo eigen npm-projekt. Omfettet Sass-kompiler, Autoprefixer, Stylelint, PurgeCSS, en Bootstrap-ikoanen.

Kaarten en loops

Bootstrap omfettet in hânfol Sass-kaarten, kaaiweardepearen dy't it makliker meitsje om famyljes fan relatearre CSS te generearjen. Wy brûke Sass kaarten foar ús kleuren, raster breakpoints, en mear. Krekt as Sass fariabelen, alle Sass kaarten befetsje de !defaultflagge en kin wurde oerskreaun en útwreide.

Guon fan ús Sass-kaarten binne standert gearfoege yn lege. Dit wurdt dien om te tastean maklik útwreiding fan in opjûne Sass map, mar komt op 'e kosten fan in make fuortsmite items út in kaart wat dreger.

Map feroarje

Alle fariabelen yn de $theme-colorskaart wurde definiearre as standalone fariabelen. Om in besteande kleur yn ús $theme-colorskaart te feroarjen, foegje it folgjende ta oan jo oanpaste Sass-bestân:

$primary: #0074d9;
$danger: #ff4136;

Letter wurde dizze fariabelen ynsteld yn Bootstrap's $theme-colorskaart:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Taheakje oan kaart

Foegje nije kleuren ta oan $theme-colors, of elke oare kaart, troch in nije Sass-kaart te meitsjen mei jo oanpaste wearden en it te fusearjen mei de orizjinele kaart. Yn dit gefal meitsje wy in nije $custom-colorskaart en fusearje it mei $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Fuortsmite fan kaart

Om kleuren te ferwiderjen fan $theme-colors, of in oare kaart, brûk map-remove. Wês bewust dat jo moatte ynfoegje $theme-colorstusken ús easken krekt nei syn definysje yn variablesen foar syn gebrûk yn 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

Required kaaien

Bootstrap giet oan fan de oanwêzigens fan guon spesifike kaaien binnen Sass-kaarten lykas wy dizze sels brûkten en útwreidzje. As jo de opnommen kaarten oanpasse, kinne jo flaters tsjinkomme wêr't de kaai fan in spesifike Sass-kaart wurdt brûkt.

Wy brûke bygelyks de primary, success, en dangertoetsen fan $theme-colorsfoar keppelings, knoppen en formulierstaten. It ferfangen fan de wearden fan dizze kaaien soe gjin problemen presintearje, mar it fuortheljen fan se kin Sass-kompilaasjeproblemen feroarsaakje. Yn dizze gefallen moatte jo de Sass-koade oanpasse dy't gebrûk makket fan dy wearden.

Funksjes

Kleuren

Njonken de Sass-kaarten dy't wy hawwe, kinne temakleuren ek brûkt wurde as standalone fariabelen, lykas $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Jo kinne kleuren ljochterje of tsjusterder meitsje mei Bootstrap's tint-color()en shade-color()funksjes. Dizze funksjes sille kleuren mingje mei swart of wyt, yn tsjinstelling ta Sass 'native lighten()en darken()funksjes dy't de ljochtheid sille feroarje mei in fêst bedrach, wat faaks net liedt ta it winske 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));
}

Yn 'e praktyk soene jo de funksje neame en de kleur- en gewichtparameters trochjaan.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Kleur kontrast

Om te foldwaan oan 'e Web Content Accessibility Guidelines (WCAG) kontrasteasken, moatte auteurs in minimale tekstkleurkontrast fan 4.5:1 en in minimum net-tekstkleurkontrast fan 3:1 leverje , mei heul pear útsûnderings.

Om hjirmei te helpen, hawwe wy de color-contrastfunksje opnommen yn Bootstrap. It brûkt it WCAG-kontrastferhâldingsalgoritme foar it berekkenjen fan kontrastdrompels basearre op relative luminânsje yn in sRGBkleurromte om automatysk in ljocht ( #fff), donkere ( #212529) of swarte ( #000) kontrastkleur werom te jaan basearre op de oantsjutte basiskleur. Dizze funksje is benammen nuttich foar mixins as loops wêr't jo meardere klassen generearje.

Bygelyks om kleurstalen te generearjen fan ús $theme-colorskaart:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

It kin ek brûkt wurde foar ienmalige kontrastbehoeften:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Jo kinne ek in basiskleur opjaan mei ús kleurkaartfunksjes:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Escape SVG

Wy brûke de escape-svgfunksje om te ûntkommen oan de <, >en #karakters foar SVG eftergrûnôfbyldings. By it brûken fan de escape-svgfunksje moatte gegevens URI's wurde oanhelle.

Funksjes tafoegje en subtractearje

Wy brûke de funksjes adden subtractom de CSS- calcfunksje te wikkeljen. It primêre doel fan dizze funksjes is om flaters te foarkommen as in "ienheidleaze" 0wearde wurdt trochjûn yn in calcútdrukking. Ekspresjes lykas calc(10px - 0)sille in flater weromjaan yn alle browsers, nettsjinsteande wiskundich korrekt.

Foarbyld wêr't de berekkening jildich is:

$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);
}

Foarbyld wêr't de berekkening ûnjildich is:

$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

Us scss/mixins/map hat in ton mixins dy't dielen fan Bootstrap oanmeitsje en kinne ek brûkt wurde yn jo eigen projekt.

Kleurskema's

In shorthandmixin foar de mediaquery prefers-color-schemeis beskikber mei stipe foar light, dark, en oanpaste kleurskema's.

@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
  }
}