Sass

Benotzt eis Quell Sass Dateien fir Variabelen, Kaarten, Mixins a Funktiounen ze profitéieren fir Iech ze hëllefen méi séier ze bauen an Äre Projet ze personaliséieren.

Op dëser Säit

Benotzt eis Quell Sass Dateien fir Variabelen, Kaarten, Mixins a méi ze profitéieren.

Datei Struktur

Wann ëmmer méiglech, vermeit d'Kärdateien vum Bootstrap z'änneren. Fir Sass heescht dat Äert eegent Stylesheet ze kreéieren deen Bootstrap importéiert fir datt Dir se änneren an ausdehnen. Unzehuelen datt Dir e Package Manager wéi npm benotzt, hutt Dir eng Dateistruktur déi esou ausgesäit:

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

Wann Dir eis Quelldateien erofgelueden hutt an net e Package Manager benotzt, wëllt Dir manuell eppes ähnlech wéi déi Struktur erstellen, andeems Dir Bootstrap Quelldateien vun Ärem eegene getrennt hält.

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

Importéieren

An Ärem custom.scss, importéiert Dir Bootstrap Quell Sass Dateien. Dir hutt zwou Méiglechkeeten: enthält all Bootstrap, oder wielt déi Deeler déi Dir braucht. Mir encouragéieren déi lescht, awer bewosst datt et e puer Ufuerderungen an Ofhängegkeeten iwwer eise Komponenten sinn. Dir musst och e puer JavaScript fir eis Plugins enthalen.

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

Mat deem Setup op der Plaz kënnt Dir ufänken eng vun de Sass Variablen a Kaarten an Ärem custom.scss. Dir kënnt och ufänken Deeler vum Bootstrap ënner der // OptionalRubrik ze addéieren wéi néideg. Mir proposéieren de komplette Importstack aus eiser bootstrap.scssDatei als Äre Startpunkt ze benotzen.

Variabel Defaults

All Sass Variabel am Bootstrap enthält de !defaultFändel deen Iech erlaabt de Standardwäert vun der Variabel an Ärem eegene Sass ze iwwerschreiden ouni de Bootstrap säi Quellcode z'änneren. Kopie a Paste Variabelen wéi néideg, änneren hir Wäerter, an ewechzehuelen de !defaultFändel. Wann eng Variabel scho zougewisen ass, da gëtt se net vun de Standardwäerter am Bootstrap nei zougewisen.

Dir fannt déi komplett Lëscht vu Bootstrap Variablen an scss/_variables.scss. E puer Variablen sinn op gesat null, dës Variablen ginn d'Eegeschaft net eraus ausser se sinn an Ärer Konfiguratioun iwwerschratt.

Variabel Iwwerschreiden musse kommen nodeems eis Funktiounen importéiert sinn, awer virum Rescht vun den Importer.

Hei ass e Beispill dat den background-colora colorfir den ännert <body>wann Dir Bootstrap iwwer npm importéiert a kompiléiert:

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

Widderhuelen wéi néideg fir all Variabel am Bootstrap, dorënner déi global Optiounen hei drënner.

Start mat Bootstrap iwwer npm mat eisem Startprojet! Gitt op den twbs/bootstrap-npm-starter Template Repository fir ze kucken wéi Dir Bootstrap an Ärem eegene npm Projet bauen an personaliséiere kënnt. Enthält Sass Compiler, Autoprefixer, Stylelint, PurgeCSS, a Bootstrap Ikonen.

Kaarten a Schleifen

Bootstrap enthält eng Handvoll Sass Kaarten, Schlësselwäertpaaren, déi et méi einfach maachen Famillen vu verwandte CSS ze generéieren. Mir benotze Sass Kaarten fir eis Faarwen, Gitterbriechpunkten a méi. Just wéi Sass Verännerlechen, all Sass Kaarten enthalen de !defaultFändel a kann iwwerdribblen an verlängert ginn.

E puer vun eise Sass Kaarten ginn als Standard an eidel fusionéiert. Dëst gëtt gemaach fir eng einfach Expansioun vun enger bestëmmter Sass Kaart z'erméiglechen, awer kënnt op d'Käschte fir Elementer vun enger Kaart e bësse méi schwéier ze läschen .

Kaart änneren

All Verännerlechen op der $theme-colorsKaart sinn als Standalone Verännerlechen definéiert. Fir eng existent Faarf op eiser $theme-colorsKaart z'änneren, füügt déi folgend op Är personaliséiert Sass Datei:

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

Méi spéit ginn dës Variablen an der Bootstrap $theme-colorsKaart gesat:

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

Foto op Kaart

Füügt nei Faarwen op $theme-colors, oder all aner Kaart, andeems Dir eng nei Sass Kaart mat Äre personaliséierte Wäerter erstellt an se mat der ursprénglecher Kaart fusionéiert. An dësem Fall erstellen mir eng nei $custom-colorsKaart a fusionéiere se mat $theme-colors.

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

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

Ewechzehuelen vun der Kaart

Fir Faarwen aus $theme-colors, oder all aner Kaart ze läschen, benotzt map-remove. Sidd bewosst datt Dir $theme-colorstëscht eisen Ufuerderunge just no senger Definitioun an variablesa virum Gebrauch an 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éideg Schlësselen

Bootstrap iwwerhëlt d'Präsenz vun e puer spezifesche Schlësselen bannent Sass Kaarten wéi mir dës selwer benotzt hunn a verlängeren. Wéi Dir déi abegraff Kaarten personaliséiere kënnt, kënnt Dir Feeler begéinen wou e spezifesche Sass Kaart säi Schlëssel benotzt gëtt.

Zum Beispill benotze mir d' primary, success, a dangerSchlësselen aus $theme-colorsfir Linken, Knäppercher a Form Staaten. D'Ersatz vun de Wäerter vun dëse Schlësselen sollt keng Probleemer presentéieren, awer d'Ewechhuele vun hinnen kann Sass Kompiléierungsprobleemer verursaachen. An dëse Fäll musst Dir de Sass Code änneren, deen dës Wäerter benotzt.

Fonctiounen

Faarwen

Nieft de Sass Kaarten déi mir hunn, kënnen Themefaarwen och als Standalone Variablen benotzt ginn, wéi $primary.

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

Dir kënnt d'Faarwen hell oder däischter maachen mat Bootstrap's tint-color()a shade-color()Funktiounen. Dës Funktiounen wäerte Faarwen mat schwaarz oder wäiss vermëschen, am Géigesaz zu Sass 'native lighten()a darken()Funktiounen, déi d'Liichtegkeet ëm e fixe Betrag änneren, wat dacks net zum gewënschten Effekt féiert.

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

An der Praxis géift Dir d'Funktioun uruffen an d'Faarf- a Gewiichtparameter passéieren.

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

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

Faarf Kontrast

Fir de Web Content Accessibility Guidelines (WCAG) Kontrast Ufuerderunge gerecht ze ginn, mussen d'Auteuren e Minimum Textfaarfkontrast vu 4,5:1 an e Minimum non-text Faarfkontrast vun 3:1 ubidden , mat ganz wéinegen Ausnahmen.

Fir domat ze hëllefen, hu mir d' color-contrastFunktioun am Bootstrap abegraff. Et benotzt de WCAG Kontrastverhältnis Algorithmus fir Kontrastschwellen auszerechnen op Basis vun der relativer Luminanz an engem sRGBFaarfraum fir automatesch eng hell ( #fff), donkel ( #212529) oder schwaarz ( #000) Kontrastfaarf op der spezifizéierter Basisfaarf zréckzekommen. Dës Funktioun ass besonnesch nëtzlech fir Mixins oder Loops wou Dir verschidde Klassen generéiert.

Zum Beispill, fir Faarfswatches vun eiser $theme-colorsKaart ze generéieren:

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

Et kann och fir eenzel Kontrastbedürfnisser benotzt ginn:

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

Dir kënnt och eng Basisfaarf mat eise Faarfkaartfunktiounen uginn:

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

Flucht SVG

Mir benotzen d' escape-svgFunktioun fir ze entkommen <, >a #Charaktere fir SVG Hannergrondbiller. Wann Dir d' escape-svgFunktioun benotzt, mussen d'Donnéeën URIs zitéiert ginn.

Fonctiounen addéieren an subtrahéieren

Mir benotzen d' Funktiounen adda subtractfir d'CSS calcFunktioun ze wéckelen. De primäre Zweck vun dëse Funktiounen ass Feeler ze vermeiden wann e "Unitless" 0Wäert an en calcAusdrock passéiert ass. Ausdréck wéi calc(10px - 0)wäerten e Feeler an all Browser zréckginn, obwuel se mathematesch korrekt sinn.

Beispill wou de Calc gëlteg ass:

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

Beispill wou de Calc ongëlteg ass:

$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

Eise scss/mixins/Verzeechnes huet eng Tonn vu Mixins déi Deeler vu Bootstrap kreéieren a kënnen och iwwer Ären eegene Projet benotzt ginn.

Faarf Schemaen

E Shorthand Mixin fir d' prefers-color-schemeMedien Ufro ass verfügbar mat Ënnerstëtzung fir light, dark, a personaliséiert Faarfschemaen.

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