Alcuni mesi fa ho elencato 7 motivi per cui dovreste usare Sass invece del CSS convenzionale per costruire siti web sorprendenti. Uno di questi motivi è la possibilità di personalizzare Bootstrap, il framework front-end più usato al mondo. In questo post del blog, spiegherò alcuni concetti di base per migliorare Bootstrap 4 con Sass per offrire un’esperienza utente unica e deliziosa.
Sass e Bootstrap 4 setup
Per iniziare, installare Sass e ottenere l’ultima distribuzione di Bootstrap 4. L’attuale ultima versione di Bootstrap è la 4.2.1. Avrai bisogno dei file sorgente di Bootstrap 4, da non confondere con i file CSS/JS compilati. Una volta decompressi i file, troverai una directory scss.
Cosa c’è dentro la cartella scss?
La cartella Bootstrap scss contiene una serie di file .scss e anche 2 directory, mixins e utilities, con altro codice Sass. Copia il contenuto di questa cartella in una nuova cartella bootstrap e mettila in una directory scss sotto la radice del tuo progetto.
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
Per convertire questi file .scss in un foglio di stile CSS, di’ a Sass di compilare bootstrap.scss in bootstrap.css eseguendo il seguente comando dalla radice del tuo progetto:
$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css
Puoi anche aggiungere il flag –watch per dire a Sass di compilare automaticamente il CSS ogni volta che un file scss è stato aggiornato. Leggi la guida di Sass per ulteriori informazioni.
Nota che:
- css è la cartella contenente i file CSS. Puoi chiamarla come vuoi.
- Se la cartella di output non esiste, il compilatore la creerà per te.
- Se qualcosa va storto, il compilatore ti mostrerà cosa è successo. Per esempio, questo errore ti dice che manca un file .scss di riferimento:
Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet
Prima di iniziare la fase di personalizzazione, ecco alcuni principi importanti da seguire riguardo ai file sorgente di Bootstrap Sass:
- Non modificare i file sorgente di Bootstrap, perché questo renderà più difficile aggiornare la tua versione di Bootstrap in futuro.
- Il file bootstrap.scss contiene i file .scss che devono essere compilati. Se dai un’occhiata a quel file vedrai una lista di riferimenti @import per prendere piccoli pezzi di Sass. In altre parole, questo è il file principale che controlla quali componenti aggiungerai.
- Un altro importante file .scss è _variables.scss. Ogni singola variabile che Bootstrap usa è definita qui, e ce ne sono molte. Nota anche che ogni variabile ha la stringa “!default” alla fine, il che significa che sarai in grado di sovrascrivere i loro valori.
- _functions.scss e _mixins.scss sono gli altri 2 file .scss principali nel codice sorgente. Questi file contengono un insieme di funzioni e mixins necessari a Bootstrap per compilare gli altri componenti.
Aggiungi i tuoi file tema
Come puoi personalizzare Bootstrap senza modificare i suoi file? Per prima cosa, crea la tua cartella “theme” all’interno della cartella scss. Questa cartella conterrà tutti i tuoi file scss personalizzati. In secondo luogo, crea un file main.scss vuoto sotto la directory scss. E terzo, crea un nuovo file bootstrap-overrides.scss, anch’esso sotto la directory scss.
A Mugo, preferiamo usare una cartella tema separata per mantenere le cose organizzate così:
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, come da nome, sarà il file scss principale del tuo progetto. Qui, dirai a Sass cosa deve essere importato:
@import "bootstrap-overrides";@import "my-theme/my-theme";
bootstrap-overrides.scss agirà come il file principale bootstrap.scss. Qui, avrai il pieno controllo su quali file di Bootstrap devono essere inclusi, e puoi anche sovrascrivere le variabili di default del framework.
Per iniziare, puoi creare bootstrap-overrides.scss come una copia di bootstrap/bootstrap.scss, ma ricorda di aggiornare il percorso di ogni dichiarazione @import poiché abbiamo personalizzato la struttura della directory 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";
Aggiornamento dei colori del tema
Bootstrap usa una serie di variabili per impostare il sistema di colori del framework. Tutte queste variabili si trovano in _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;
Supponendo che tu voglia aggiornare il colore primario del tema (blu), definiscilo nel tuo file bootstrap-overrides.scss. La variabile deve essere posta prima di tutte le dichiarazioni @import.
$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";
Quando si compila il codice Sass, questo nuovo valore di $primary color sarà usato per tutto il codice che fa riferimento alla variabile $primary.
Modificare i breakpoint di default
I breakpoint di bootstrap sono definiti anche nel file _variables.scss. Ecco i valori predefiniti:
$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);
Per aggiornare i breakpoints esistenti o aggiungerne di nuovi, basta sovrascrivere la variabile $grid-breakpoints passando solo le chiavi richieste.
$grid-breakpoints: (sm: 500px,xxl: 1440px);
In questo esempio, stiamo cambiando il valore del breakpoint “sm” a 500px (invece di 576px) e aggiungendo un nuovo breakpoint chiamato “xxl”.
Relativamente a questo, c’è un’altra importante variabile chiamata $container-max-widths che definisce la larghezza massima della classe .container per breakpoint. I valori predefiniti sono:
sm: 540px,md: 720px,lg: 960px,xl: 1140px
Per il nostro esempio, dobbiamo aggiornare il valore “sm” e aggiungerne uno nuovo per il nuovo breakpoint “xxl”. Altrimenti la classe contenitore avrà una larghezza massima di 1140px, non importa quanto sia grande il viewport.
$container-max-widths: (sm: 480px,xxl: 1400px);
Personalizza le regole di spaziatura
Un altro grande set di classi di aiuto di Bootstrap sono quelle relative alle regole di spaziatura. I valori predefiniti sono gestiti dalle variabili $spacer e $spacers. Per aggiornare i loro valori predefiniti, basta definirli nel file bootstrap-overrides.scss:
$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));
Dopo che il codice Sass è stato compilato, produrrà il seguente 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;}
Sfrutta alcune variabili utili
I colori del tema, i punti di rottura e le variabili di spaziatura sono solo alcune delle variabili più utili all’interno del framework, ma ce ne sono molte altre. Per esempio, non ti piace lo stile dei bordi arrotondati? Puoi facilmente rimuovere i bordi arrotondati impostando la variabile globale $enable-rounded a “false”. Bello, vero?
Ecco alcune altre utili variabili che apportano alcune semplici ma potenti modifiche al CSS compilato:
$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 è usato per gestire l’icona del caret visualizzata principalmente all’interno degli elementi a discesa. Il valore predefinito è true.
- $enable-rounded è usato per controllare i bordi arrotondati degli elementi. Se visualizzi bordi arrotondati puoi anche gestire il valore di border-radius sovrascrivendo la variabile $border-radius.
- $enable-shadows è usato per controllare la proprietà box-shadow dei pulsanti e degli elementi del modulo. $btn-box-shadow è la variabile che controlla lo stile box-shadow.
- $enable-gradients abilita gradienti predefiniti tramite stili background-image su vari componenti.
Consiglio di consultare la pagina delle opzioni di Bootstrap Sass e di rivedere anche _variables.scss per vedere tutto ciò che si può fare.
Utilizza solo ciò di cui hai veramente bisogno
E infine, ma non meno importante, hai il pieno controllo su quali componenti Bootstrap devono essere inclusi. Se ci sono componenti e utilità di Bootstrap che il tuo sito non usa, puoi escluderli in modo che il file CSS compilato sia il più leggero possibile. Se hai bisogno di usare i componenti in futuro, semplicemente decommentali.
@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";
Una volta che hai finito la personalizzazione, ricordati di compilare il codice Sass per creare il tuo file CSS.
$ sass scss/main.scss:css/my-theme.css
O ancora meglio, usa il flag –watch in modo che Sass compili i tuoi file scss in background ogni volta che un file è stato aggiornato:
$ sass --watch scss/main.scss:css/my-theme.css
Cosa c’è dopo?
I passi precedenti ti permetteranno di personalizzare Bootstrap 4 e modificare un po’ la shell standard del framework, ma questo è solo l’inizio del processo di personalizzazione. Il tuo sito sarà probabilmente riconoscibile come un “sito Bootstrap”. A Mugo, realizziamo siti dall’aspetto completamente unico secondo le specifiche di design, fornendo esperienze utente deliziose e siti ad alte prestazioni. Il punto di partenza è spesso Bootstrap usando i principi sopra descritti, ma otteniamo di più da Sass e Bootstrap scomponendo ulteriormente i nostri elementi personalizzati, definendo ulteriormente una struttura di file e cartelle, e usando tutti i mixin, le utility e altri elementi del framework all’interno dei nostri file del tema (a partire da my-theme.scss) come necessario.