Bootstrap je známý framework s předpřipravenými komponentami, který pomáhá webdesignérům rychle vytvořit web. Nová verze Bootstrap 4.2.1 používá jako preprocesor Sass. V tomto blogu tedy pochopíme, jak přepsat Bootstrap pomocí proměnných sass.
Víme, že musíme přepsat styl Bootstrap, abychom dali webu nový vzhled. Stejně jako u tématu – pozadí, písma, barvy, řádkování atd. jsou za výstup zodpovědné proměnné Scss. Zde musíme přepsat výchozí proměnné Bootstrap. Přejděme k přepsání Bootstrapu.
Přidejte Bootstrap do projektu
Nejprve si stáhněte bootstrap ze stránky Bootstrap ke stažení. Poté vytvoříme ve složce scss složku pod názvem vendors a přidáme do ní Bootstrap. V souborech Bootstrapu nebudeme nic měnit, protože by to v budoucnu způsobilo problém, až budete chtít Bootstrap aktualizovat. Po vytvoření složky můžete do této složky přidat soubor bootstrap.scss, který jste zkompilovali.
V Bootstrapu-4 používají příznak !default, který popisuje výchozí hodnotu proměnné. Stačí tuto proměnnou zkopírovat, přidat do ní svou hodnotu a odstranit z ní příznak !default.
Proměnné přepsané
Bootstrap má vlastní soubor “_variables.scss” ve složce “scss”, který obsahuje všechny proměnné používané v Bootstrapu. Nyní přidejte do složky scss složku s názvem “abstracts” a vytvořte v ní “_custom-variables.scss”.
Nyní otevřete Bootstrap > scss >”_variables.scss”. Proměnné Bootstrapu zde přímo neměníme, takže proměnné zkopírujeme z “_variables.scss” a vložíme do “_custom-variables.scss”. Po vložení proměnných můžete do proměnných přidat novou hodnotu.
Musíte aktualizovat primární barvu motivu (modrou) a definovat ji v souboru “_custom-variables.scss”. Proměnná musí být před všemi příkazy @import. Při kompilaci kódu Sass lze tuto novou barvu $primary použít pro veškerý kód, který odkazuje na proměnnou $primary.
Úprava výchozích bodů zlomu
Body zlomu mřížky
Body zlomu mřížky jsou také definovány v souboru _variables.scss. Zde jsou výchozí hodnoty:
Stávající body přerušení můžete změnit nebo přidat nové. Stačí přepsat proměnnou $grid-breakpoints a přidat pouze požadované hodnoty.
Šířka kontejnerů
V souboru _variables.scss jsou také definovány maximální šířky kontejnerů Bootstrap. Zde jsou výchozí hodnoty:
Upraveno v souboru “_custom-variables.scss”
Přizpůsobení pravidel pro rozestupy
Bootstrap poskytuje sadu rozestupů, která pomáhá při úpravě rozestupů. Proměnné $spacer a $spacer spravují základní hodnotu rozestupů. Můžete je aktualizovat, přidávat a přepisovat.
Výchozí proměnné v Bootstrapu
Přepisovatelné proměnné
Bootstrap také poskytuje mnoho proměnných, které můžeme přepsat, jako např:
Používejte jen to, co potřebujete
Bootstrap má tolik komponent, které můžete použít, ale nemusíte používat všechny komponenty, které bootstrap poskytuje. Nad bootstrapem máte kontrolu, proto do něj zahrňte komponenty, které potřebujete. Pokud je nezahrnete, bude soubor CSS lehčí s menším množstvím kódu. A tyto komponenty můžete zahrnout, kdykoli je budete v budoucnu potřebovat. Pokud budete komponenty v budoucnu potřebovat, jednoduše je odkomentujte.
Několik užitečných proměnných
Bootstrap poskytuje některé důležité globální volby, které můžete přepínat. Například border-radius, box-shadow a gradienty atd.
Tyto proměnné najdete v souboru scss/_variables.scss.
$enable-caret: Slouží k povolení pseudoelementu caret na .dropdown-toggle.
$enable-rounded: Použijte pro přidání nebo odebrání border-radius (výchozí: true)
$enable-shadows: Použijte pro přidání nebo odebrání box-shadows (výchozí: false)
$enable-gradients: Použijte pro gradienty přes background-image (výchozí: false)
$enable-transitions: Použijte pro přidání nebo odebrání přechodů (výchozí: true)
$enable-grid-classes: Slouží k přidání nebo odebrání tříd pro systém mřížky (výchozí: true)
$enable-print-styles:
Můžete zkontrolovat sass-options zde:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options
Závěr
Viděli jste, jak snadné je přepsat bootstrap -saas pomocí proměnných saas. Snažili jsme se vám poskytnout podrobného průvodce, který vám pomůže s postupem pomocí vizualizací a funkcí krok za krokem. Přepsat bootstrap je velmi snadné za předpokladu, že víte, jak najít důležité proměnné. A pokud jste prošli náš blog, pak jste na přepsání připraveni!”
.