Sass

Využite naše zdrojové súbory Sass a využite výhody premenných, máp, mixov a funkcií, ktoré vám pomôžu rýchlejšie vytvárať a prispôsobovať váš projekt.

Na tejto stránke

Využite naše zdrojové súbory Sass a využite výhody premenných, máp, mixov a ďalších.

Štruktúra súboru

Vždy, keď je to možné, vyhnite sa úpravám základných súborov Bootstrapu. Pre Sass to znamená vytvorenie vlastnej šablóny so štýlmi, ktorá importuje Bootstrap, aby ste ju mohli upravovať a rozširovať. Za predpokladu, že používate správcu balíkov, ako je npm, budete mať štruktúru súborov, ktorá vyzerá takto:

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

Ak ste si stiahli naše zdrojové súbory a nepoužívate správcu balíkov, budete chcieť manuálne vytvoriť niečo podobné tejto štruktúre, pričom zdrojové súbory Bootstrapu ponecháte oddelené od vašich vlastných.

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

Importuje sa

Do svojho custom.scss, importujete zdrojové súbory Sass Bootstrapu. Máte dve možnosti: zahrnúť celý Bootstrap alebo vybrať časti, ktoré potrebujete. Odporúčame to druhé, aj keď si uvedomte, že medzi našimi komponentmi existujú určité požiadavky a závislosti. Budete tiež musieť zahrnúť nejaký JavaScript pre naše doplnky.

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

S týmto nastavením môžete začať upravovať ktorúkoľvek z premenných a máp Sass vo vašom súbore custom.scss. Podľa potreby môžete tiež začať pridávať časti Bootstrapu do // Optionalsekcie. bootstrap.scssAko východiskový bod odporúčame použiť celý zásobník importu z nášho súboru.

Predvolené hodnoty premenných

Každá premenná Sass v Bootstrap obsahuje !defaultpríznak, ktorý vám umožňuje prepísať predvolenú hodnotu premennej vo vašom vlastnom Sass bez úpravy zdrojového kódu Bootstrapu. Skopírujte a prilepte premenné podľa potreby, upravte ich hodnoty a odstráňte !defaultpríznak. Ak už bola premenná priradená, nebude priradená podľa predvolených hodnôt v Bootstrape.

Kompletný zoznam premenných Bootstrapu nájdete v scss/_variables.scss. Niektoré premenné sú nastavené na null, tieto premenné nevydávajú vlastnosť, pokiaľ nie sú prepísané vo vašej konfigurácii.

Prepisy premenných musia prísť po importovaní našich funkcií, ale pred zvyškom importov.

Tu je príklad, ktorý mení background-colora colorpre <body>pri importovaní a kompilácii Bootstrap cez 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

Opakujte podľa potreby pre akúkoľvek premennú v Bootstrap, vrátane globálnych možností nižšie.

Začnite s Bootstrap cez npm s naším štartovacím projektom! Prejdite do úložiska šablón twbs/bootstrap-npm-starter a zistite, ako vytvoriť a prispôsobiť Bootstrap vo svojom vlastnom projekte npm. Obsahuje prekladač Sass, Autoprefixer, Stylelint, PurgeCSS a ikony Bootstrap.

Mapy a slučky

Bootstrap obsahuje niekoľko máp Sass, párov kľúčových hodnôt, ktoré uľahčujú vytváranie rodín súvisiacich CSS. Sass mapy používame pre naše farby, prerušovacie body mriežky a ďalšie. Rovnako ako premenné Sass, všetky mapy Sass obsahujú !defaultpríznak a možno ich prepísať a rozšíriť.

Niektoré z našich máp Sass sú štandardne zlúčené do prázdnych. Toto sa robí, aby sa umožnilo jednoduché rozšírenie danej mapy Sass, ale za cenu toho, že odstraňovanie položiek z mapy bude trochu zložitejšie.

Upravte mapu

Všetky premenné na $theme-colorsmape sú definované ako samostatné premenné. Ak chcete upraviť existujúcu farbu na našej $theme-colorsmape, pridajte do svojho vlastného súboru Sass nasledovné:

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

Neskôr sa tieto premenné nastavia v $theme-colorsmape Bootstrapu:

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

Pridať na mapu

Pridajte nové farby do $theme-colorsmapy alebo akejkoľvek inej mapy vytvorením novej mapy Sass s vašimi vlastnými hodnotami a jej zlúčením s pôvodnou mapou. V tomto prípade vytvoríme novú $custom-colorsmapu a zlúčime ju s $theme-colors.

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

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

Odstrániť z mapy

Ak chcete odstrániť farby z $theme-colorsmapy alebo akejkoľvek inej mapy, použite map-remove. Uvedomte si, že medzi naše požiadavky musíte vložiť $theme-colorshneď po ich definícii v variablesa pred ich použitím v 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

Požadované kľúče

Bootstrap predpokladá prítomnosť niektorých špecifických kľúčov v mapách Sass, ktoré sme používali a sami ich rozširujeme. Pri prispôsobovaní zahrnutých máp sa môžete stretnúť s chybami, keď sa používa špecifický kľúč mapy Sass.

Napríklad používame klávesy primary, success, a dangerz $theme-colorspre odkazy, tlačidlá a stavy formulárov. Nahradenie hodnôt týchto kľúčov by nemalo predstavovať žiadne problémy, ale ich odstránenie môže spôsobiť problémy s kompiláciou Sass. V týchto prípadoch budete musieť upraviť kód Sass, ktorý tieto hodnoty využíva.

Funkcie

Farby

Okrem máp Sass , ktoré máme, možno farby témy použiť aj ako samostatné premenné, napríklad $primary.

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

Farby môžete zosvetliť alebo stmaviť pomocou funkcií Bootstrap tint-color()a shade-color()funkcií. Tieto funkcie budú miešať farby s čiernou alebo bielou, na rozdiel od natívnych funkcií Sass lighten()a darken()funkcií, ktoré zmenia svetlosť o pevnú hodnotu, čo často nevedie k požadovanému efektu.

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

V praxi by ste zavolali funkciu a odovzdali parametre farby a hmotnosti.

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

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

Farebný kontrast

Aby autori splnili požiadavky na kontrast Web Content Accessibility Guidelines (WCAG) , musia poskytnúť minimálny farebný kontrast textu 4,5:1 a minimálny netextový farebný kontrast 3:1 , s veľmi malými výnimkami.

Aby sme tomu pomohli, zahrnuli sme color-contrastfunkciu do Bootstrap. Používa algoritmus kontrastného pomeru WCAG na výpočet prahových hodnôt kontrastu na základe relatívnej svietivosti vo sRGBfarebnom priestore, aby sa automaticky vrátila svetlá ( #fff), tmavá ( #212529) alebo čierna ( #000) kontrastná farba na základe špecifikovanej základnej farby. Táto funkcia je obzvlášť užitočná pre mixiny alebo cykly, kde generujete viacero tried.

Ak chcete napríklad vygenerovať vzorky farieb z našej $theme-colorsmapy:

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

Môže sa použiť aj na jednorazové potreby kontrastu:

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

Môžete tiež určiť základnú farbu pomocou našich funkcií mapy farieb:

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

Únik SVG

Túto funkciu používame escape-svgna únik znakov <, >a #pre obrázky na pozadí SVG. Pri použití escape-svgfunkcie je potrebné uviesť identifikátory URI údajov.

Funkcie sčítania a odčítania

Na zabalenie funkcie CSS používame funkcie adda . Primárnym účelom týchto funkcií je vyhnúť sa chybám, keď sa do výrazu prenáša hodnota „bez jednotiek“. Výrazy ako vracajú chybu vo všetkých prehliadačoch, aj keď sú matematicky správne.subtractcalc0calccalc(10px - 0)

Príklad, kde je výpočet platný:

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

Príklad, keď je výpočet neplatný:

$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

Náš scss/mixins/adresár obsahuje množstvo mixov, ktoré poháňajú časti Bootstrapu a dajú sa použiť aj vo vašom vlastnom projekte.

Farebné schémy

K dispozícii je skrátená kombinácia pre prefers-color-schememediálny dotaz s podporou pre light, dark, a vlastné farebné schémy.

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