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.
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 nastaviť niečo podobné tejto štruktúre a ponechať zdrojové súbory Bootstrapu 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";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.
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 ho musíte vložiť medzi naše požiadavky a možnosti:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@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 štandardy dostupnosti WCAG 2.0 pre farebný kontrast , musia poskytnúť kontrastný pomer aspoň 4,5:1 , s veľmi malými výnimkami.
Ďalšou funkciou, ktorú do Bootstrapu zaraďujeme, je funkcia kontrastu farieb, color-contrast. Využíva algoritmus WCAG 2.0 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
}
}