Přejít na hlavní obsah Přejít na navigaci v dokumentech
Check
in English

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.

Na této straně

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.

Začněte s Bootstrap přes npm s naším startovacím projektem! Přejděte do úložiště šablon twbs/bootstrap-npm-starter , kde se dozvíte, jak vytvořit a přizpůsobit Bootstrap ve svém vlastním projektu npm. Zahrnuje Sass kompilátor, Autoprefixer, Stylelint, PurgeCSS a ikony Bootstrap.

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