Sass és Bootstrap 4 beállítása

A kezdéshez telepítse a Sass-t és szerezze be a legújabb Bootstrap 4 terjesztést. A Bootstrap jelenlegi legújabb verziója a 4.2.1. Szükséged lesz a Bootstrap 4 forrásfájljaira, nem összetévesztendő a lefordított CSS/JS fájlokkal. Miután kicsomagoltad a fájlokat, találsz egy scss könyvtárat.

Mi van az scss mappában?

A Bootstrap scss mappa tartalmaz egy sor .scss fájlt, valamint 2 könyvtárat, a mixins és a segédprogramokat, további Sass kóddal. Másolja át ennek a mappának a tartalmát egy új bootstrap mappába, és helyezze el a projekt gyökere alatti scss könyvtárban.

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

Az .scss fájlok CSS stílustáblává alakításához utasítsa a Sass-t, hogy a bootstrap.scss-t fordítsa bootstrap.css-re a következő parancs futtatásával a projekt gyökeréből:

$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css

A –watch jelzőt is megadhatja, hogy a Sass-t utasítsa a CSS automatikus fordítására minden alkalommal, amikor egy scss fájl frissül. További információkért olvassa el a Sass útmutatót.

Ne feledje, hogy:

• css a CSS fájl(ok)at tartalmazó mappa. Bármilyen nevet adhat neki.
• Ha a kimeneti mappa nem létezik, a fordító létrehozza ön helyett.
• Ha valami rosszul megy, a fordító megmutatja, mi történt. Ez a hiba például azt jelzi, hogy hiányzik egy hivatkozott .scss fájl:

Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet

A testreszabási fázis megkezdése előtt itt van néhány fontos alapelv, amit a Bootstrap Sass forrásfájlokkal kapcsolatban be kell tartani:

• Ne szerkessze a Bootstrap forrásfájlokat, mert ez megnehezíti a jövőben a Bootstrap verziójának frissítését.
• A bootstrap.scss fájl tartalmazza, hogy milyen .scss fájlokat kell lefordítani. Ha belenézel ebbe a fájlba, látni fogsz egy listát a @import hivatkozásokról, hogy felvehesd a kisebb Sass darabokat. Más szóval ez a fő fájl, amely szabályozza, hogy milyen komponenseket fogsz hozzáadni.
• A másik fontos .scss fájl a _variables.scss. Minden egyes változó, amit a Bootstrap használ, itt van definiálva, és rengeteg van belőle. Figyeljünk arra is, hogy minden változó végén a “!default” karakterlánc áll, ami azt jelenti, hogy felülbírálhatjuk az értékeiket.
• A _functions.scss és a _mixins.scss a másik két fő .scss fájl a forráskódon belül. Ezek a fájlok tartalmazzák a szükséges függvények és mixins-ek készletét, amelyekre a Bootstrapnek szüksége van a többi komponens lefordításához.

Add hozzá a saját témafájljaidat

Hogyan szabhatod testre a Bootstrapet anélkül, hogy szerkesztenéd a fájljait? Először is hozzon létre egy saját “theme” könyvtárat az scss könyvtáron belül. Ez a mappa fogja tartalmazni az összes egyéni scss fájlodat. Másodszor, hozzon létre egy üres main.scss fájlt az scss könyvtár alatt. Harmadszor pedig hozzon létre egy új bootstrap-overrides.scss fájlt, szintén az scss könyvtár alatt.

A Mugo-ban mi inkább egy külön theme mappát használunk, hogy a dolgok így legyenek rendszerezve:

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, a neve szerint a fő scss fájl lesz a projektjében. Itt fogod megmondani a Sass-nak, hogy mit kell importálni:

@import "bootstrap-overrides";@import "my-theme/my-theme";

bootstrap-overrides.scss úgy fog viselkedni, mint a fő bootstrap.scss fájl. Itt teljes irányításunk lesz arra, hogy milyen alapvető Bootstrap fájlokat kell beépíteni, és felülbírálhatjuk az alapértelmezett keretváltozókat is.

Kezdésnek létrehozhatjuk a bootstrap-overrides.scss-t a bootstrap/bootstrap.scss másolataként, de ne feledjük, hogy frissítsük az egyes @import utasítások elérési útvonalát, mivel testre szabtuk az scss könyvtárszerkezetét.

/*!* 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";

Témaszínek frissítése

A bootstrap egy csomó változót használ a keretrendszer színrendszerének beállításához. Ezek a változók mindegyike a _variables.scss fájlban található:

$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;

Tegyük fel, hogy frissíteni szeretnénk az elsődleges téma színét (kék), definiáljuk azt a bootstrap-overrides.scss fájlban. A változót az összes @import utasítás előtt kell elhelyezni.

$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";

A Sass kód lefordításakor ezt az új $primary color értéket fogja használni minden olyan kód, amely a $primary változóra hivatkozik.

Az alapértelmezett töréspontok módosítása

A bootstrap töréspontok szintén a _variables.scss fájlban vannak definiálva. Itt vannak az alapértelmezett értékek:

$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);

A meglévő töréspontok frissítéséhez vagy újak hozzáadásához csak felül kell írni a $grid-breakpoints változót, csak a szükséges kulcsokat kell átadni.

$grid-breakpoints: (sm: 500px,xxl: 1440px);

Ebben a példában az “sm” töréspont értékét 500px-re változtatjuk (576px helyett) és hozzáadunk egy új, “xxl” nevű töréspontot.

Ezzel kapcsolatban van egy másik fontos változó, a $container-max-widths, amely a .container osztály maximális szélességét határozza meg töréspontonként. Az alapértelmezett értékek:

sm: 540px,md: 720px,lg: 960px,xl: 1140px

Példánk esetében frissítenünk kell az “sm” értéket, és hozzá kell adnunk egy újat az új “xxl” törésponthoz. Ellenkező esetben a konténer osztály maximális szélessége 1140px lesz, függetlenül attól, hogy mekkora a nézetablak.

$container-max-widths: (sm: 480px,xxl: 1400px);

A távolságszabályok testreszabása

A Bootstrap segédosztályok másik nagyszerű készlete a távolságszabályokkal kapcsolatos osztályok. Az alapértelmezett értékeket a $spacer és $spacers változók kezelik. Az alapértelmezett értékeik frissítéséhez csak meg kell határozni őket a bootstrap-overrides.scss fájlban:

$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));

A Sass kód lefordítása után a következő CSS-t fogja előállítani:

.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;}

Hasznos változók kihasználása

A témaszínek, a töréspontok és a távolságváltozók csak néhány a keretrendszer leghasznosabb változói közül, de sokkal több is van. Nem tetszik például a lekerekített szegélyek stílusa? Könnyedén eltávolíthatja a lekerekített kereteket, ha a $enable-rounded globális változót “false”-ra állítja. Szép, nem?

Itt van még néhány hasznos változó, amelyek egyszerű, de erőteljes változtatásokat végeznek a lefordított CSS-ben:

$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;

• A $enable-caret a főleg a legördülő elemekben megjelenő caret ikon kezelésére szolgál. Alapértelmezett értéke true.
• $enable-rounded az elemek lekerekített határainak vezérlésére szolgál. Ha lekerekített határokat jelenít meg, akkor a border-radius értékét is kezelheti a $border-radius változót felülírva.
• $enable-shadows a gombok és űrlapelemek box-shadow tulajdonságának vezérlésére szolgál. A $btn-box-shadow a box-shadow stilizálást vezérlő változó.
• $enable-gradients lehetővé teszi az előre definiált gradienseket a background-image stílusokon keresztül a különböző komponenseken.

A Bootstrap Sass opciók oldalának megtekintését és a _variables áttekintését is ajánlom.scss-t, hogy lássa, mi mindenre van lehetősége.

Csak azt használja, amire tényleg szüksége van

És végül, de nem utolsósorban, teljes mértékben Ön irányíthatja, hogy milyen Bootstrap komponensek kerüljenek bele. Ha vannak olyan Bootstrap komponensek és segédprogramok, amelyeket az oldalad nem használ, kizárhatod őket, hogy a lefordított CSS fájl a lehető legkönnyebb legyen. Ha a jövőben szüksége lesz a komponensek használatára, egyszerűen vegye ki a megjegyzéseket.

@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";

Amikor befejezte a testreszabást, ne felejtse el lefordítani a Sass kódot a CSS fájl létrehozásához.

$ sass scss/main.scss:css/my-theme.css

Vagy még jobb, ha használja a –watch flaget, hogy a Sass a háttérben minden egyes frissítéskor lefordítsa az scss fájlokat:

$ sass --watch scss/main.scss:css/my-theme.css

Mi következik?

A fenti lépésekkel testre szabhatja a Bootstrap 4-et, és egy kicsit módosíthatja a standard keretrendszer héját, de ez csak a testreszabási folyamat kezdete. A webhelye valószínűleg “Bootstrap webhelyként” lesz felismerhető. A Mugónál teljesen egyedi megjelenésű oldalakat készítünk a tervezési specifikációknak megfelelően, élvezetes felhasználói élményt és nagy teljesítményű oldalakat biztosítva. A kiindulópont gyakran a Bootstrap a fent vázolt elvek alkalmazásával, de mi többet hozunk ki a Sassból és a Bootstrapből azáltal, hogy tovább bontjuk saját egyéni elemeinket, tovább definiáljuk a fájl- és mappaszerkezetet, és szükség szerint használjuk az összes mixint, segédprogramot és egyéb keretelemet a témafájljainkon belül (a my-theme.scss-től kezdve).