Sass
Skorzystaj z naszych źródłowych plików Sass, aby skorzystać ze zmiennych, map, domieszek i funkcji, które pomogą Ci szybciej budować i dostosowywać projekt.
Skorzystaj z naszych źródłowych plików Sass, aby skorzystać ze zmiennych, map, domieszek i nie tylko.
Struktura pliku
Jeśli to możliwe, unikaj modyfikowania podstawowych plików Bootstrapa. Dla Sassa oznacza to stworzenie własnego arkusza stylów, który importuje Bootstrap, dzięki czemu możesz go modyfikować i rozszerzać. Zakładając, że używasz menedżera pakietów, takiego jak npm, będziesz miał strukturę plików, która wygląda tak:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Jeśli pobrałeś nasze pliki źródłowe i nie korzystasz z menedżera pakietów, będziesz chciał ręcznie skonfigurować coś podobnego do tej struktury, zachowując oddzielne pliki źródłowe Bootstrapa od własnych.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importowanie
W swoim custom.scss, zaimportujesz źródłowe pliki Sass Bootstrapa. Masz dwie opcje: uwzględnij wszystkie Bootstrap lub wybierz potrzebne części. Zachęcamy do tego drugiego, ale pamiętaj, że w naszych komponentach istnieją pewne wymagania i zależności. Będziesz także musiał dołączyć JavaScript do naszych wtyczek.
// 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Mając taką konfigurację, możesz zacząć modyfikować dowolne zmienne Sass i mapy w swoim custom.scss. Możesz również zacząć dodawać części Bootstrapa w // Optionalsekcji, w razie potrzeby. Sugerujemy użycie pełnego stosu importu z naszego bootstrap.scsspliku jako punktu wyjścia.
Zmienne wartości domyślne
Każda zmienna Sass w Bootstrap zawiera !defaultflagę umożliwiającą nadpisanie domyślnej wartości zmiennej we własnym Sass bez modyfikowania kodu źródłowego Bootstrap. Skopiuj i wklej zmienne według potrzeb, zmodyfikuj ich wartości i usuń !defaultflagę. Jeśli zmienna została już przypisana, nie zostanie ponownie przypisana przez wartości domyślne w Bootstrap.
Pełną listę zmiennych Bootstrapa znajdziesz w scss/_variables.scss. Niektóre zmienne są ustawione na null, te zmienne nie zwracają właściwości, chyba że zostaną zastąpione w Twojej konfiguracji.
Nadpisania zmiennych muszą nastąpić po zaimportowaniu naszych funkcji, ale przed pozostałymi importami.
Oto przykład, który zmienia background-colori colordla <body>podczas importowania i kompilowania Bootstrap przez 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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Powtórz w razie potrzeby dla dowolnej zmiennej w Bootstrap, w tym poniższych opcji globalnych.
Mapy i pętle
Bootstrap zawiera garść map Sass, par klucz-wartość, które ułatwiają generowanie rodzin powiązanych CSS. Używamy map Sass dla naszych kolorów, punktów przerwania siatki i nie tylko. Podobnie jak zmienne Sass, wszystkie mapy Sass zawierają !defaultflagę i mogą być nadpisane i rozszerzone.
Niektóre z naszych map Sass są domyślnie połączone w puste. Ma to na celu umożliwienie łatwej rozbudowy danej mapy Sass, ale odbywa się to kosztem nieco utrudnionego usuwania przedmiotów z mapy.
Modyfikuj mapę
Wszystkie zmienne w $theme-colorsmapie są zdefiniowane jako zmienne samodzielne. Aby zmodyfikować istniejący kolor na naszej $theme-colorsmapie, dodaj następujące elementy do niestandardowego pliku Sass:
$primary: #0074d9;
$danger: #ff4136;
Później te zmienne są ustawiane w $theme-colorsmapie Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Dodaj do mapy
Dodaj nowe kolory do $theme-colorsmapy lub dowolnej innej mapy, tworząc nową mapę Sass ze swoimi niestandardowymi wartościami i łącząc ją z oryginalną mapą. W takim przypadku utworzymy nową $custom-colorsmapę i połączymy ją z $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Usuń z mapy
Aby usunąć kolory z $theme-colorslub dowolnej innej mapy, użyj map-remove. Pamiętaj, że musisz umieścić go między naszymi wymaganiami i opcjami:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Wymagane klucze
Bootstrap zakłada obecność pewnych określonych kluczy na mapach Sass, których używaliśmy i sami je rozszerzamy. Podczas dostosowywania dołączonych map możesz napotkać błędy, gdy używany jest określony klucz mapy Sass.
Na przykład używamy kluczy primary, success, i dangerfrom $theme-colorsdla łączy, przycisków i stanów formularzy. Zastąpienie wartości tych kluczy nie powinno stwarzać problemów, ale ich usunięcie może spowodować problemy z kompilacją Sass. W takich przypadkach musisz zmodyfikować kod Sass, który korzysta z tych wartości.
Funkcje
Zabarwienie
Oprócz map Sass , które mamy, kolory motywu mogą być również używane jako samodzielne zmienne, takie jak $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Możesz rozjaśnić lub przyciemnić kolory za pomocą funkcji tint-color()i Bootstrap shade-color(). Funkcje te będą mieszać kolory z czernią lub bielą, w przeciwieństwie do natywnych Sassa lighten()i darken()funkcji zmieniających jasność o ustaloną wartość, co często nie prowadzi do pożądanego 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));
}
W praktyce wywołasz funkcję i przekażesz parametry koloru i wagi.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kontrast kolorów
Aby spełnić standardy dostępności WCAG 2.0 dla kontrastu kolorów , autorzy muszą zapewnić współczynnik kontrastu co najmniej 4,5:1 , z nielicznymi wyjątkami.
Dodatkową funkcją, którą zawieramy w Bootstrap jest funkcja kontrastu kolorów, color-contrast. Wykorzystuje algorytm WCAG 2.0 do obliczania progów kontrastu na podstawie względnej luminancji w sRGBprzestrzeni kolorów, aby automatycznie zwracać kontrast jasny ( #fff), ciemny ( #212529) lub czarny ( #000) na podstawie określonego koloru bazowego. Ta funkcja jest szczególnie przydatna w przypadku domieszek lub pętli, w których generujesz wiele klas.
Na przykład, aby wygenerować próbki kolorów z naszej $theme-colorsmapy:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Może być również używany do jednorazowych potrzeb związanych z kontrastem:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Możesz również określić kolor bazowy za pomocą naszych funkcji mapy kolorów:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Ucieczka SVG
Używamy tej escape-svgfunkcji do ucieczki znaków <, >i #dla obrazów tła SVG. Podczas korzystania z escape-svgfunkcji identyfikatory URI danych muszą być cytowane.
Funkcje dodawania i odejmowania
Używamy funkcji addi subtractdo owijania calcfunkcji CSS. Podstawowym celem tych funkcji jest unikanie błędów, gdy do wyrażenia 0jest przekazywana wartość „bez jednostek” . calcWyrażenia takie jak calc(10px - 0)zwrócą błąd we wszystkich przeglądarkach, mimo że są matematycznie poprawne.
Przykład, gdzie obliczenia są prawidłowe:
$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);
}
Przykład, w którym obliczenia są nieprawidłowe:
$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);
}
Mieszanki
Nasz scss/mixins/katalog zawiera mnóstwo domieszek, które zasilają części Bootstrap i mogą być również używane w Twoim własnym projekcie.
Schematy kolorów
Dostępny jest skrócony mixin dla prefers-color-schemezapytania o media z obsługą light, darki niestandardowych schematów kolorów.
@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
}
}