Joitakin kuukausia sitten listasin 7 syytä, miksi sinun pitäisi käyttää Sassia perinteisen CSS:n sijaan upeiden verkkosivustojen rakentamiseen. Yksi näistä syistä on mahdollisuus muokata Bootstrapia, maailman käytetyintä front-end-kehystä. Tässä blogikirjoituksessa selitän muutamia peruskäsitteitä Bootstrap 4:n parantamiseen Sassin avulla ainutlaatuisen ja ilahduttavan käyttäjäkokemuksen aikaansaamiseksi.
Sassin ja Bootstrap 4:n käyttöönotto
Aloittaaksesi asenna Sassin asennusohjelmisto ja hanki uusin Bootstrap 4 -jakelu. Bootstrapin nykyinen uusin versio on 4.2.1. Tarvitset Bootstrap 4:n lähdetiedostot, joita ei pidä sekoittaa käännettyihin CSS/JS-tiedostoihin. Kun olet purkanut tiedostot, löydät scss-hakemiston.
Mitä scss-kansion sisällä on?
Bootstrapin scss-kansio sisältää joukon .scss-tiedostoja ja lisäksi kaksi hakemistoa, mixins ja utilities, joissa on lisää Sass-koodia. Kopioi tämän kansion sisältö uuteen bootstrap-kansioon ja sijoita se projektisi juuren alla olevaan scss-hakemistoon.
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
Muuttaaksesi nuo .scss-tiedostot CSS-tyylitauluksi käske Sassia kääntämään bootstrap.scss-tiedosto bootstrap.css:ksi ajamalla seuraava komento projektisi juurelta:
$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css
Voit myös lisätä –watch-lippulauseen kertoaksesi Sassille, että se kääntää CSS:n joka kerta, kun jokin scss-tiedosto päivitetään. Lue lisätietoja Sass-oppaasta.
Huomaa, että:
- css on kansio, joka sisältää CSS-tiedosto(t). Voit nimetä sen miksi haluat.
- Jos tulostuskansiota ei ole olemassa, kääntäjä luo sen puolestasi.
- Jos jokin menee pieleen, kääntäjä näyttää, mitä tapahtui. Esimerkiksi tämä virhe kertoo, että viitattu .scss-tiedosto puuttuu:
Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet
Ennen kuin aloitat muokkausvaiheen, tässä on muutamia tärkeitä periaatteita, joita kannattaa noudattaa Bootstrapin Sass-lähdetiedostojen suhteen:
- Älä muokkaa Bootstrap-lähdetiedostoja, koska se vaikeuttaa Bootstrap-version päivittämistä tulevaisuudessa.
- Bootstrap.scss-tiedosto sisältää ne .scss-tiedostot, jotka on käännettävä. Jos vilkaiset tuota tiedostoa, näet listan @import-viittauksia, joiden avulla voit poimia pieniä Sass-paloja. Toisin sanoen tämä on tärkein tiedosto, joka ohjaa, mitä komponentteja lisäät.
- Toinen tärkeä .scss-tiedosto on _variables.scss. Jokainen muuttuja, jota Bootstrap käyttää, määritellään tässä, ja niitä on paljon. Huomaa myös, että jokaisen muuttujan lopussa on merkkijono ”!default”, mikä tarkoittaa, että voit ohittaa niiden arvot.
- _functions.scss ja _mixins.scss ovat kaksi muuta tärkeintä .scss-tiedostoa lähdekoodissa. Nämä tiedostot sisältävät joukon tarvittavia funktioita ja mixinejä, joita Bootstrap tarvitsee muiden komponenttien kääntämiseen.
Lisää omia teematiedostoja
Miten voit muokata Bootstrapia muokkaamatta sen tiedostoja? Luo ensin oma ”teema”-hakemistosi scss-hakemiston sisälle. Tämä kansio sisältää kaikki mukautetut scss-tiedostosi. Toiseksi, luo tyhjä main.scss-tiedosto scss-hakemiston alle. Ja kolmanneksi, luo uusi bootstrap-overrides.scss-tiedosto, myös scss-hakemiston alle.
Me Mugossa käytämme mieluummin erillistä teemakansiota, jotta asiat pysyvät järjestyksessä näin:
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 on nimensä mukaisesti projektisi tärkein scss-tiedosto. Tässä kerrot Sassille, mitä pitää tuoda:
@import "bootstrap-overrides";@import "my-theme/my-theme";
bootstrap-overrides.scss toimii kuten bootstrap.scss-päätiedosto. Täällä sinulla on täysi kontrolli siitä, mitä Bootstrapin ydintiedostoja pitää sisällyttää, ja voit myös ohittaa oletusarvoiset kehysmuuttujat.
Aluksi voit luoda bootstrap-overrides.scss:n kopiona bootstrap/bootstrap.scss:stä, mutta muista päivittää jokaisen @import-lausekkeen polku, koska olemme muokanneet scss:n hakemistorakennetta.
/*!* 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";
Päivitä teeman värit
Bootstrap käyttää joukon muuttujia puitteiden värijärjestelmän asettamiseen. Kaikki nämä muuttujat sijaitsevat tiedostossa _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;
Jos haluat päivittää ensisijaisen teemavärin (sininen), määritä se bootstrap-overrides.scss-tiedostossa. Muuttuja on sijoitettava ennen kaikkia @import-lausekkeita.
$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";
Kun käännät Sass-koodin, tätä uutta $primary-värin arvoa käytetään kaikessa koodissa, jossa viitataan $primary-muuttujaan.
Muokkaa oletusarvoisia pysäytyspisteitä
Bootstrapin pysäytyspisteitä määritetään niin ikään _muuttujat.scss-tiedostossa. Tässä ovat oletusarvot:
$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);
Päivittääksesi olemassa olevia taukopisteitä tai lisätäksesi uusia, sinun tarvitsee vain ohittaa $grid-breakpoints-muuttuja syöttämällä vain tarvittavat avaimet.
$grid-breakpoints: (sm: 500px,xxl: 1440px);
Tässä esimerkissä muutamme ”sm”-taukopisteen arvon 500px:ksi (576px:n sijaan) ja lisäämme uuden ”xxl”-nimisen taukopisteen.
Tässä yhteydessä on toinen tärkeä muuttuja nimeltä $container-max-widths, joka määrittää .container-luokan maksimileveyden taukopistettä kohden. Oletusarvot ovat:
sm: 540px,md: 720px,lg: 960px,xl: 1140px
Esimerkkimme tapauksessa meidän on päivitettävä ”sm”-arvo ja lisättävä uusi arvo uudelle ”xxl”-taukopisteelle. Muuten kontti-luokan maksimileveys on 1140px riippumatta siitä, kuinka suuri näkymäikkuna on.
$container-max-widths: (sm: 480px,xxl: 1400px);
Välysluokkasääntöjen muokkaaminen
Toinen hieno joukko Bootstrapin apuluokkia ovat välysluokkasääntöihin liittyvät luokat. Oletusarvoja hallitaan $spacer- ja $spacers-muuttujilla. Jos haluat päivittää niiden oletusarvot, sinun tarvitsee vain määritellä ne bootstrap-overrides.scss-tiedostossa:
$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));
Sass-koodin kääntämisen jälkeen se tuottaa seuraavan 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;}
Hyödynnä joitain hyödyllisiä muuttujia
Teemavärit, katkaisupisteet ja välimatka-muuttujat ovat vain joitain hyödyllisimpiä muuttujia viitekehyksen sisällä, mutta paljon muitakin on. Etkö esimerkiksi pidä pyöristettyjen reunojen muotoilusta? Voit helposti poistaa pyöristetyt reunat asettamalla globaalin muuttujan $enable-rounded arvoksi ”false”. Hienoa, eikö?
Tässä on lisää hyödyllisiä muuttujia, jotka tekevät yksinkertaisia mutta tehokkaita muutoksia käännettyyn CSS:ään:
$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-muuttujaa käytetään pääasiassa pudotusvalikkoelementtien sisällä näkyvän caret-kuvakkeen hallintaan. Oletusarvo on true.
- $enable-rounded käytetään elementtien pyöristettyjen reunojen hallintaan. Jos näytetään pyöristettyjä reunoja, voit hallita myös border-radius -arvoa ohittaen $border-radius -muuttujan.
- $enable-shadows käytetään hallitsemaan painikkeiden ja lomake-elementtien box-shadow-ominaisuutta. $btn-box-shadow on muuttuja, joka hallitsee box-shadow-tyylin muotoilua.
- $enable-gradients mahdollistaa ennalta määritellyt kaltevuudet background-image-tyylien kautta eri komponenteissa.
Suosittelen tutustumaan Bootstrap Sass options -sivuun ja tutustumaan myös _variablesiin.scss nähdäksesi, mitä kaikkea voit tehdä.
Käytä vain sitä, mitä todella tarvitset
Ja viimeisenä muttei vähäisimpänä, sinulla on täysi kontrolli siitä, mitä Bootstrap-komponentteja sisällytetään. Jos on Bootstrap-komponentteja ja apuohjelmia, joita sivustosi ei käytä, voit jättää ne pois, jotta käännetty CSS-tiedosto on mahdollisimman kevyt. Jos haluat käyttää komponentteja tulevaisuudessa, poista ne yksinkertaisesti kommentoimatta.
@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";
Kun olet saanut muokkauksen valmiiksi, muista kääntää Sass-koodi CSS-tiedoston luomiseksi.
$ sass scss/main.scss:css/my-theme.css
Vai vielä parempi, käytä –watch-lippua, jotta Sass kääntää scss-tiedostosi taustalla joka kerta, kun tiedostoa on päivitetty:
$ sass --watch scss/main.scss:css/my-theme.css
Mitä seuraavaksi?
Yllä olevien vaiheiden avulla voit muokata Bootstrap 4:ää ja muokata vakiokehyksen kuorta hieman, mutta tämä on vasta muokkausprosessin alku. Sivustosi on todennäköisesti tunnistettavissa ”Bootstrap-sivustoksi”. Me Mugossa teemme täysin yksilöllisen näköisiä sivustoja suunnittelun spesifikaatioiden mukaisesti, tuottaen ihastuttavia käyttäjäkokemuksia ja suorituskykyisiä sivustoja. Lähtökohtana on usein Bootstrap käyttäen edellä esitettyjä periaatteita, mutta saamme enemmän irti Sassista ja Bootstrapista pilkkomalla tarkemmin omia mukautettuja elementtejämme, määrittelemällä tarkemmin tiedosto- ja kansiorakenteen ja käyttämällä kaikkia mixinejä, apuohjelmia ja muita kehyselementtejä teematiedostojemme sisällä (alkaen my-theme.scss:stä) tarpeen mukaan.