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ě vytvořit 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.scssimportujete 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";
// 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čí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 // Optionalsekci. bootstrap.scssJako 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 !defaultpří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 !defaultpří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-colora colorpro <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/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 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 !defaultpří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-colorsmapě jsou definovány jako samostatné proměnné. Chcete-li upravit stávající barvu na naší $theme-colorsmapě, 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-colorsmapě Bootstrapu:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Přidat na mapu
Přidejte nové barvy do $theme-colorsmapy 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-colorsmapu 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-colorsmapy nebo jakékoli jiné mapy, použijte map-remove. Uvědomte si, že $theme-colorsmezi naše požadavky musíte vložit hned po jeho definici v variablesa před jeho 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é 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, , successa 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 požadavky na kontrast Web Content Accessibility Guidelines (WCAG) , musí poskytnout minimální barevný kontrast textu 4,5:1 a minimální barevný kontrast netextu 3:1 , s velmi malými výjimkami.
Abychom tomu pomohli, zahrnuli jsme color-contrastfunkci do Bootstrap. Používá algoritmus kontrastního poměru WCAG pro výpočet prahových hodnot kontrastu na základě relativní svítivosti v sRGBbarevném prostoru, aby se automaticky vrátila světlá ( #fff), tmavá ( #212529) nebo černá ( #000) kontrastní barva 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-colorsmapy:
@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-svgk escapování znaků <, >a #pro obrázky na pozadí SVG. Při použití escape-svgfunkce musí být uvedeny identifikátory URI dat.
Funkce sčítání a odečítání
K zabalení funkce CSS používáme funkce adda . 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é.subtractcalc0calccalc(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-schemedotaz 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
}
}