pl | ja Manupulowanie zmiennymi
Zmienne Sass
Zmienne Sass kodu źródłowego Bootstrap są zdefiniowane w _variables.scss z opcją !default. Możesz zmienić lub zmodyfikować te zmienne, aby dostosować style Bootstrapa.
Parametry podstawowe
Poniższe zmienne są podstawowymi parametrami dla całych ustawień stylów.
-
$font-size-base: Bazowy rozmiar czcionki (domyślnie:1rem), wpływa na wszystkie rozmiary czcionek stylów Bootstrapa -
$spacer: Długość jednostki dla narzędzi Spacing (domyślnie:1rem)
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";Zmienne ustawienia wstępne dostosowywania
Zmienne, które zaczynają się od $enable- są wbudowanymi ustawieniami wstępnymi dostosowywania (zobacz opcje Sass, aby uzyskać pełną listę). Na przykład, gradienty i cienie są domyślnie wyłączone (w wersji 4.1.1). Możesz włączyć te opcje za pomocą kodu rozszerzenia, jak poniżej.
gradient+shadow.scss (część początkowa)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...Zobacz efekty gradacji i cieni, aby sprawdzić różnice w reprezentacji wizualnej.
Modyfikowanie zmiennych mapy
Sass obsługuje różne typy zmiennych (zobacz Typy danych). Większość zmiennych jest skalarna (liczby, ciągi znaków, kolory, booleans i null). Ale zmienne poniżej są zdefiniowane jako mapy klucz-wartość.
-
$grays: Wstępne ustawienia skali szarości -
$colors: Kolory podstawowe (niebieski, indygo, fioletowy, …) -
$theme-colors: Kolory motywu Bootstrapa (podstawowy, drugorzędny, sukces, …) -
$spacers: Wstępnie ustawione wartości Spacing utitilies -
$sizes: Wstępnie ustawione wartości Sizing utitilies -
$grid-breakpoints: Wstępnie ustawione punkty przerwania siatki (szerokość rzutni) -
$container-max-widths: Szerokość kontenera siatki dla każdego punktu przerwania
Możesz również modyfikować te zmienne. Dodawanie i zmienianie wartości jest proste.
variables.scss (źródło Sass dla tej strony)// Example: Modify $theme-colors$theme-colors: ( // change "success" from green to teal "success": #20c997, // add "custom" to orange "custom": #fd7e14);// import Bootstrap@import "bootstrap/scss/bootstrap";Poniżej znajdują się próbki alertów na żywo (porównaj z domyślnymi kolorami Bootstrapa ⇒ zobacz przykłady w oficjalnym dokumencie).
div.alert.alert-success div.alert.alert-custom Możesz również usunąć istniejące wpisy mapy za pomocą wbudowanych funkcji Sass (szukaj map-remove($map, $keys...) z map-functions). Ale musisz zaimportować partials inwidualnie. Zobacz Usuń z mapy oficjalnego dokumentu, aby uzyskać szczegółowe informacje.