Kilka miesięcy temu wymieniłem 7 powodów, dla których powinieneś używać Sass zamiast konwencjonalnego CSS do budowania wspaniałych stron internetowych. Jednym z tych powodów jest możliwość dostosowania Bootstrapa, najczęściej używanego frameworka front-end na świecie. W tym wpisie na blogu, wyjaśnię kilka podstawowych pojęć, aby ulepszyć Bootstrap 4 za pomocą Sass, aby dostarczyć unikalne i zachwycające doświadczenie użytkownika.
Sass i Bootstrap 4 setup
Aby zacząć, zainstaluj Sass i pobierz najnowszą dystrybucję Bootstrap 4. Aktualna najnowsza wersja Bootstrapa to 4.2.1. Będziesz potrzebował plików źródłowych Bootstrapa 4, nie mylić z skompilowanymi plikami CSS/JS. Po rozpakowaniu plików, znajdziesz katalog scss.
Co jest wewnątrz folderu scss?
Folder scss Bootstrapa zawiera zestaw plików .scss, a także 2 katalogi, mixins i utilities, z większą ilością kodu Sass. Skopiuj zawartość tego folderu do nowego folderu bootstrap i umieść go w katalogu scss pod korzeniem swojego projektu.
my-web-project/ (root folder of your project)|-- scss/| |-- bootstrap/| | |-- mixins/| | | |-- | | |-- utilities/| | | |-- | | |-- _alert.scss| | |-- _badge.scss| | |-- _breadcrumb.scss | | |-- | | |-- _variables.scss| | |-- bootstrap-grid.scss| | |-- bootstrap-reboot.scss| | |-- bootstrap.scss
Aby przekształcić te pliki .scss w arkusz stylów CSS, powiedz Sassowi, aby skompilował bootstrap.scss do bootstrap.css, wykonując następujące polecenie z korzenia projektu:
$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css
Możesz również dodać flagę –watch, aby powiedzieć Sassowi, aby automatycznie kompilował CSS za każdym razem, gdy plik scss został zaktualizowany. Przeczytaj przewodnik po Sass, aby uzyskać więcej informacji.
Zauważ, że:
- css jest folderem zawierającym plik(i) CSS. Możesz go nazwać jak chcesz.
- Jeśli folder wyjściowy nie istnieje, kompilator utworzy go dla ciebie.
- Jeśli coś pójdzie nie tak, kompilator pokaże ci, co się stało. Na przykład, ten błąd mówi, że brakuje pliku .scss:
Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet
Przed rozpoczęciem fazy dostosowywania, oto kilka ważnych zasad, których należy przestrzegać w odniesieniu do plików źródłowych Bootstrap Sass:
- Nie edytuj plików źródłowych Bootstrap, ponieważ utrudni to aktualizację wersji Bootstrap w przyszłości.
- Plik bootstrap.scss zawiera pliki .scss, które muszą być skompilowane. Jeśli zajrzysz do tego pliku, zobaczysz listę referencji @import, aby podnieść małe kawałki Sass. Innymi słowy, jest to główny plik, który kontroluje jakie komponenty dodasz.
- Kolejnym ważnym plikiem .scss jest _variables.scss. Każda pojedyncza zmienna, której używa Bootstrap jest tu zdefiniowana, a jest ich bardzo dużo. Zwróć również uwagę, że każda zmienna ma ciąg „!default” na końcu, co oznacza, że będziesz mógł nadpisać ich wartości.
- _functions.scss i _mixins.scss to pozostałe 2 główne pliki .scss w kodzie źródłowym. Pliki te zawierają zestaw wymaganych funkcji i mixinów, których Bootstrap potrzebuje aby skompilować inne komponenty.
Dodaj własne pliki motywu
Jak dostosować Bootstrapa bez edytowania jego plików? Po pierwsze, utwórz swój własny katalog „theme” w katalogu scss. Ten folder będzie zawierał wszystkie twoje własne pliki scss. Po drugie, utwórz pusty plik main.scss w katalogu scss. I po trzecie, utwórz nowy plik bootstrap-overrides.scss, również w katalogu scss.
W Mugo, wolimy używać oddzielnego folderu tematycznego, aby utrzymać rzeczy zorganizowane w ten sposób:
my-web-project/ (root folder of your project)|-- scss/ (scss files)| |-- bootstrap/ (Bootstrap source files)| | |-- | |-- my-theme/ (your custom scss files)| | |-- my-theme.scss| | |-- | |-- bootstrap-overrides.scss| |-- main.scss
main.scss, jak sama nazwa wskazuje, będzie głównym plikiem scss w twoim projekcie. Tutaj powiesz Sassowi co ma być zaimportowane:
@import "bootstrap-overrides";@import "my-theme/my-theme";
bootstrap-overrides.scss będzie działał jak główny plik bootstrap.scss. Tutaj będziesz miał pełną kontrolę nad tym, które pliki Bootstrapa muszą być dołączone, a także możesz nadpisać domyślne zmienne frameworka.
Na początek, możesz utworzyć bootstrap-overrides.scss jako kopię bootstrap/bootstrap.scss, ale pamiętaj, aby zaktualizować ścieżkę każdego oświadczenia @import, ponieważ dostosowaliśmy strukturę katalogów scss.
/*!* Bootstrap v4.2.1 (https://getbootstrap.com/)* Copyright 2011-2018 The Bootstrap Authors* Copyright 2011-2018 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";@import "bootstrap/root";@import "bootstrap/reboot";
Update theme colors
Bootstrap używa kilku zmiennych do ustawienia systemu kolorów szkieletu. Wszystkie te zmienne znajdują się w pliku _variables.scss:
$blue: #007bff !default;$indigo: #6610f2 !default;$purple: #6f42c1 !default;$pink: #e83e8c !default;$red: #dc3545 !default;$orange: #fd7e14 !default;$yellow: #ffc107 !default;$green: #28a745 !default;$teal: #20c997 !default;$cyan: #17a2b8 !default;$primary: $blue !default;$secondary: $gray-600 !default;$success: $green !default;$info: $cyan !default;$warning: $yellow !default;$danger: $red !default;$light: $gray-100 !default;$dark: $gray-800 !default;
Założywszy, że chcesz zaktualizować podstawowy kolor motywu (niebieski), zdefiniuj go w swoim pliku bootstrap-overrides.scss. Zmienna musi być umieszczona przed wszystkimi deklaracjami @import.
$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";
Kiedy skompilujesz kod Sass, ta nowa wartość $primary color będzie używana dla całego kodu, który odwołuje się do zmiennej $primary.
Modyfikuj domyślne punkty przerwania
Punkty przerwania bootstrapa są również zdefiniowane w pliku _variables.scss. Oto wartości domyślne:
$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);
Aby zaktualizować istniejące punkty przerwania lub dodać nowe, wystarczy nadpisać zmienną $grid-breakpoints, przekazując tylko wymagane klucze.
$grid-breakpoints: (sm: 500px,xxl: 1440px);
W tym przykładzie, zmieniamy wartość breakpointu „sm” na 500px (zamiast 576px) i dodajemy nowy breakpoint o nazwie „xxl”.
Powiązana z tym, jest jeszcze jedna ważna zmienna o nazwie $container-max-widths, która definiuje maksymalną szerokość klasy .container na breakpoint. Domyślne wartości to:
sm: 540px,md: 720px,lg: 960px,xl: 1140px
Dla naszego przykładu, musimy zaktualizować wartość „sm” i dodać nową dla nowego punktu przerwania „xxl”. W przeciwnym razie klasa kontenera będzie miała maksymalną szerokość 1140px bez względu na wielkość rzutni.
$container-max-widths: (sm: 480px,xxl: 1400px);
Dostosuj reguły odstępów
Kolejnym świetnym zestawem klas pomocniczych Bootstrapa są te związane z regułami odstępów. Ich domyślne wartości są zarządzane przez zmienne $spacer i $spacers. Aby zaktualizować ich wartości domyślne, wystarczy zdefiniować je w pliku bootstrap-overrides.scss:
$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));
Po skompilowaniu kodu Sass, powstanie następujący CSS:
.m-0 {margin: 0 !important;}.m-1 {margin: 0.5rem !important;}.m-2 {margin: 1rem !important;}.m-3 {margin: 1.5rem !important;}.m-4 {margin: 2rem !important;}.m-5 {margin: 3rem !important;}// new one.m-6 {margin: 5rem !important;}
Wykorzystaj kilka użytecznych zmiennych
Kolory motywu, punkty przerwania i zmienne odstępów to tylko niektóre z najbardziej użytecznych zmiennych wewnątrz frameworka, ale jest ich znacznie więcej. Na przykład, nie podoba ci się stylizacja zaokrąglonych granic? Możesz łatwo usunąć zaokrąglone obramowania ustawiając zmienną globalną $enable-rounded na „false”. Ładnie, prawda?
Oto kilka bardziej użytecznych zmiennych, które wprowadzają proste, ale potężne zmiany do skompilowanego CSS:
$enable-caret: true !default;$enable-rounded: true !default;$enable-shadows: false !default;$enable-gradients: false !default;$enable-transitions: true !default;$enable-prefers-reduced-motion-media-query: true !default;$enable-grid-classes: true !default;$enable-print-styles: true !default;$enable-validation-icons: true !default;
- $enable-caret jest używana do zarządzania ikoną opiekuna wyświetlaną głównie wewnątrz elementów rozwijanych. Domyślną wartością jest true.
- $enable-rounded służy do kontrolowania zaokrąglonych granic elementów. W przypadku wyświetlania zaokrąglonych obramowań można również zarządzać wartością border-radius nadpisując zmienną $border-radius.
- $enable-shadows służy do kontrolowania właściwości box-shadow przycisków i elementów formularza. $btn-box-shadow jest zmienną, która kontroluje stylizację box-shadow.
- $enable-gradients umożliwia predefiniowane gradienty poprzez style background-image na różnych elementach.
Zalecam skonsultowanie strony opcji Bootstrap Sass, a także przejrzenie _variables.scss, aby zobaczyć wszystko, co możesz zrobić.
Używaj tylko tego, czego naprawdę potrzebujesz
I na koniec, ale nie mniej ważne, masz pełną kontrolę nad tym, jakie komponenty Bootstrapa powinny być dołączone. Jeśli istnieją komponenty i narzędzia Bootstrapa, których Twoja strona nie używa, możesz je wykluczyć, tak aby skompilowany plik CSS był jak najlżejszy. Jeśli potrzebujesz użyć tych komponentów w przyszłości, po prostu je odkomentuj.
@import "bootstrap/pagination";// @import "bootstrap/badge";// @import "bootstrap/jumbotron";@import "bootstrap/alert";// @import "bootstrap/progress";@import "bootstrap/media";@import "bootstrap/list-group";@import "bootstrap/close";// @import "bootstrap/toasts";@import "bootstrap/modal";// @import "bootstrap/tooltip";@import "bootstrap/popover";@import "bootstrap/carousel";// @import "bootstrap/spinners";@import "bootstrap/utilities";
Po zakończeniu dostosowywania, pamiętaj o skompilowaniu kodu Sass, aby utworzyć swój plik CSS.
$ sass scss/main.scss:css/my-theme.css
Albo jeszcze lepiej, użyj flagi –watch, aby Sass skompilował twoje pliki scss w tle za każdym razem, gdy plik zostanie zaktualizowany:
$ sass --watch scss/main.scss:css/my-theme.css
Co dalej?
Powyższe kroki pozwolą ci dostosować Bootstrapa 4 i nieco zmodyfikować standardową powłokę frameworka, ale to dopiero początek procesu dostosowywania. Twoja witryna będzie prawdopodobnie rozpoznawalna jako „witryna Bootstrap”. W Mugo tworzymy całkowicie unikalnie wyglądające strony zgodnie z założeniami projektowymi, dostarczając użytkownikom wspaniałych wrażeń i wysokiej wydajności witryn. Punktem wyjścia jest często Bootstrap przy użyciu zasad opisanych powyżej, ale uzyskujemy więcej z Sass i Bootstrap poprzez dalsze rozbijanie naszych własnych elementów, dalsze definiowanie struktury plików i folderów oraz używanie wszystkich mixinów, narzędzi i innych elementów frameworka w naszych plikach motywu (zaczynając od my-theme.scss), jeśli to konieczne.