Bootstrap jest dobrze znanym frameworkiem z gotowymi komponentami, który pomaga projektantom stron internetowych szybko zbudować stronę. Nowa wersja Bootstrap 4.2.1 używa Sass jako preprocesora z wyboru. Więc w tym blogu, będziemy rozumieć, jak nadpisać Bootstrap używając zmiennych sass.
Wiemy, że musimy nadpisać styl Bootstrap, aby nadać nowy wygląd stronie internetowej. Tak jak w przypadku motywu tła, czcionek, kolorów, odstępów itp. zmienne są odpowiedzialne za Scss za wyjście. Tutaj musimy nadpisać domyślne zmienne Bootstrapa. Przejdźmy do nadpisania zmiennych Bootstrap.
Add Bootstrap In The Project
Po pierwsze, pobierz bootstrap ze strony pobierania Bootstrap. Następnie utworzymy folder pod nazwą vendors w folderze scss i dodamy Bootstrap w tym folderze. Nie będziemy nic zmieniać w plikach Bootstrapa, ponieważ spowoduje to problem w przyszłości, gdy będziesz chciał zaktualizować Bootstrapa. Po utworzeniu folderu, możesz dodać bootstrap.scss w tym pliku, który skompilowałeś.
W Bootstrap-4, używają flagi !default, która opisuje domyślną zmienną. Musisz tylko skopiować tę zmienną, dodać swoją wartość i usunąć flagę !default ze zmiennej.
Override Variables
Bootstrap ma swój własny “_variables.scss” w folderze “scss”, który zawiera wszystkie zmienne używane w Bootstrapie. Teraz dodaj folder o nazwie “abstracts” w swoim folderze scss i utwórz “_custom-variables.scss” w tym folderze.
Teraz otwórz Bootstrap > scss > “_variables.scss”. Nie zmieniamy tutaj bezpośrednio zmiennych Bootstrapa, więc skopiujemy zmienne z “_variables.scss”, i wkleimy do “_custom-variables.scss”. Po wklejeniu zmiennych, możesz dodać nową wartość w zmiennych.
Musisz zaktualizować podstawowy kolor motywu (niebieski), i zdefiniować go w swoim pliku “_custom-variables.scss”. Zmienna musi znajdować się przed wszystkimi instrukcjami @import. Kiedy skompilujesz kod Sass, ten nowy kolor $primary może być użyty we wszystkich kodach, które odwołują się do zmiennej $primary.
Modify The Default Breakpoints
Grid Breakpoints
Punkty przerwaniaootstrapa są również zdefiniowane w pliku _variables.scss. Oto domyślne wartości:
Możesz zmienić obecne punkty przerwania lub dodać nowe. Wystarczy nadpisać zmienną $grid-breakpoints dodając tylko wymagane wartości.
Szerokość kontenerów
Bootstrap container-max-widths są również zdefiniowane w pliku _variables.scss. Oto wartości domyślne:
Updated in “_custom-variables.scss”
Customize The Spacing Rules
Bootstrap dostarcza zestaw odstępów, które pomagają w dostosowaniu odstępów. Zmienne $spacer i $spacer zarządzają podstawową wartością odstępów. Można je aktualizować, dodawać i zastępować.
Default Variables In Bootstrap
Override Variables
Bootstrap dostarcza również wiele zmiennych, które możemy nadpisać jak:-
Tables, Buttons, Forms, Dropdowns, Navbar, Pagination, Tooltips, Modals, etc…
Use Only What You Need
Bootstrap posiada tak wiele komponentów, których możesz użyć, ale nie musisz używać wszystkich komponentów, które są dostarczane przez bootstrap. Masz kontrolę nad bootstrapem, więc dołącz komponenty, które są potrzebne. Jeśli ich nie włączysz, wtedy plik CSS będzie lżejszy i będzie zawierał mniej kodu. I możesz włączyć te komponenty, kiedy będziesz ich potrzebował w przyszłości. Jeśli potrzebujesz użyć tych komponentów w przyszłości, po prostu je odkomentuj.
Kilka użytecznych zmiennych
Bootstrap dostarcza kilka ważnych globalnych opcji, które możesz przełączać. Jak border-radius, box-shadow, i gradienty, etc.
Możesz znaleźć te zmienne w pliku scss/_variables.scss.
$enable-caret: Użyj do włączenia pseudo elementu caret w .dropdown-toggle.
$enable-rounded: Użyj do dodawania lub usuwania border-radius (domyślnie: true)
$enable-shadows: Użyj do dodawania lub usuwania cieni box-shadows (domyślnie: false)
$enable-gradients: Użyj dla gradientów przez background-image (domyślnie: false)
$enable-transitions: Użyj do dodawania lub usuwania przejść (domyślnie: true)
$enable-grid-classes: Do dodawania lub usuwania klas dla systemu siatki (domyślnie: true)
$enable-print-styles: Włącza style dla optymalizacji drukowania.
Możesz sprawdzić sass-opcje tutaj:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options
Wniosek
Widziałeś jak łatwo jest nadpisać bootstrap -saas używając zmiennych saas. Staraliśmy się dostarczyć Ci szczegółowy przewodnik, który pomoże Ci przejść przez ten proces z wizualizacjami i funkcjami krok po kroku. Jest to super proste, aby zastąpić bootstrap, pod warunkiem, że wiesz, jak znaleźć ważne zmienne. A jeśli przeszedłeś przez nasz blog, to jesteś gotowy do nadpisania!