Sass
Využijte naše zdrojové soubory Sass k využití proměnných, map, mixinů a funkcí, které vám pomohou rychleji vytvářet a přizpůsobovat váš projekt.
Využijte naše zdrojové soubory Sass k využití proměnných, map, mixinů a dalších.
Struktura souboru
Kdykoli je to možné, vyhněte se úpravám základních souborů Bootstrapu. Pro Sass to znamená vytvořit si vlastní šablonu stylů, která importuje Bootstrap, abyste ji mohli upravovat a rozšiřovat. Za předpokladu, že používáte správce balíčků, jako je npm, budete mít strukturu souborů, která vypadá takto:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Pokud jste si stáhli naše zdrojové soubory a nepoužíváte správce balíčků, budete chtít ručně nastavit něco podobného této struktuře a ponechat zdrojové soubory Bootstrapu oddělené od vašich vlastních.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Import
Do svého souboru custom.scss
importujete zdrojové soubory Sass Bootstrapu. Máte dvě možnosti: zahrnout celý Bootstrap, nebo si vybrat části, které potřebujete. Doporučujeme to druhé, i když si uvědomte, že mezi našimi komponentami existují určité požadavky a závislosti. Budete také muset zahrnout nějaký JavaScript pro naše pluginy.
// 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čít upravovat kteroukoli z proměnných a map Sass ve vašem custom.scss
. Podle potřeby můžete také začít přidávat části Bootstrapu pod // Optional
sekci. bootstrap.scss
Jako výchozí bod doporučujeme použít celý zásobník importu z našeho souboru.
Výchozí nastavení proměnných
Každá proměnná Sass v Bootstrapu obsahuje !default
příznak, který vám umožňuje přepsat výchozí hodnotu proměnné ve vašem vlastním Sass bez úpravy zdrojového kódu Bootstrapu. Podle potřeby zkopírujte a vložte proměnné, upravte jejich hodnoty a odstraňte !default
příznak. Pokud již byla proměnná přiřazena, nebude znovu přiřazena podle výchozích hodnot v Bootstrapu.
Kompletní seznam proměnných Bootstrapu najdete v scss/_variables.scss
. Některé proměnné jsou nastaveny na null
, tyto proměnné nevydávají vlastnost, pokud nejsou ve vaší konfiguraci přepsány.
Přepsání proměnných musí přijít po importu našich funkcí, ale před zbytkem importů.
Zde je příklad, který mění background-color
a color
pro <body>
při importu a kompilaci Bootstrap přes 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 podle potřeby pro jakoukoli proměnnou v Bootstrap, včetně globálních možností níže.
Mapy a smyčky
Bootstrap obsahuje několik map Sass, párů klíčových hodnot, které usnadňují generování rodin souvisejících CSS. Sass mapy používáme pro naše barvy, zarážky mřížky a další. Stejně jako proměnné Sass obsahují všechny mapy Sass !default
příznak a lze je přepsat a rozšířit.
Některé z našich map Sass jsou ve výchozím nastavení sloučeny do prázdných. To se provádí proto, aby bylo možné snadno rozšiřovat danou mapu Sass, ale za cenu toho, že odstranění položek z mapy bude o něco obtížnější.
Upravit mapu
Všechny proměnné v $theme-colors
mapě jsou definovány jako samostatné proměnné. Chcete-li upravit stávající barvu na naší $theme-colors
mapě, přidejte do svého vlastního souboru Sass následující:
$primary: #0074d9;
$danger: #ff4136;
Později jsou tyto proměnné nastaveny v $theme-colors
mapě Bootstrapu:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Přidat na mapu
Přidejte nové barvy do $theme-colors
mapy nebo jakékoli jiné mapy vytvořením nové mapy Sass s vlastními hodnotami a jejím sloučením s původní mapou. V tomto případě vytvoříme novou $custom-colors
mapu a sloučíme ji s $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Odebrat z mapy
Chcete-li odstranit barvy z $theme-colors
mapy nebo jakékoli jiné mapy, použijte map-remove
. Uvědomte si, že jej musíte vložit mezi naše požadavky 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é klíče
Bootstrap předpokládá přítomnost některých specifických klíčů v mapách Sass, jak jsme je používali, a sami je rozšiřujeme. Při přizpůsobování zahrnutých map se můžete setkat s chybami, když se používá konkrétní klíč mapy Sass.
Například pro odkazy, tlačítka a stavy formuláře používáme klávesy primary
, , success
a z. Nahrazení hodnot těchto klíčů by nemělo představovat žádné problémy, ale jejich odstranění může způsobit problémy s kompilací Sass. V těchto případech budete muset upravit kód Sass, který tyto hodnoty využívá.danger
$theme-colors
Funkce
Barvy
Kromě map Sass , které máme, lze barvy motivu použít také jako samostatné proměnné, například $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Barvy můžete zesvětlit nebo ztmavit pomocí Bootstrap tint-color()
a shade-color()
funkcí. Tyto funkce budou míchat barvy s černou nebo bílou, na rozdíl od nativních Sass lighten()
a darken()
funkcí, které změní světlost o pevnou hodnotu, což často nevede 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 byste funkci zavolali a předali parametry barvy a váhy.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Barevný kontrast
Aby autoři splnili standardy přístupnosti WCAG 2.0 pro barevný kontrast , musí poskytnout kontrastní poměr alespoň 4,5:1 , s několika málo výjimkami.
Další funkcí, kterou do Bootstrapu zařazujeme, je funkce barevného kontrastu, color-contrast
. Využívá algoritmus WCAG 2.0 pro výpočet prahových hodnot kontrastu na základě relativní svítivosti v sRGB
barevném prostoru, aby automaticky vrátil světlou ( #fff
), tmavou ( #212529
) nebo černou ( #000
) kontrastní barvu na základě zadané základní barvy. Tato funkce je zvláště užitečná pro mixiny nebo smyčky, kde generujete více tříd.
Chcete-li například vygenerovat vzorky barev z naší $theme-colors
mapy:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Může být také použit pro jednorázové potřeby kontrastu:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Můžete také určit základní barvu pomocí našich funkcí barevné mapy:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Únik SVG
Tuto funkci používáme escape-svg
k escapování znaků <
, >
a #
pro obrázky na pozadí SVG. Při použití escape-svg
funkce musí být uvedeny identifikátory URI dat.
Funkce sčítání a odečítání
K zabalení funkce CSS používáme funkce add
a . Primárním účelem těchto funkcí je vyhnout se chybám, když je do výrazu předána hodnota „bez jednotky“. Výrazy jako vrátí chybu ve všech prohlížečích, přestože jsou matematicky správné.subtract
calc
0
calc
calc(10px - 0)
Příklad, kdy 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);
}
Příklad, kdy 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ář má spoustu mixinů, které pohánějí části Bootstrapu a lze je také použít ve vašem vlastním projektu.
Barevná schémata
K dispozici je zkrácený mix pro prefers-color-scheme
dotaz na média s podporou pro light
, dark
, a vlastní barevná schémata.
@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
}
}