Personalizzare Bootstrap 5 usando SASS

Bootstrap è il framework di front-end più utilizzato al mondo. Esso consente a chiunque di realizzare pagine web responsive con pochissimo sforzo e risultati perfetti. Bootstrap è molto intuitivo, qualsiasi utente, anche alle prime armi, riesce ad importare nel proprio progetto la libreria ed iniziarla ad utilizzare.

Tuttavia le pagine web realizzate con Bootstrap prevedono delle impostazioni standard. Lo sviluppatore può modificare il layout standard in due modi differenti; il primo prevede la creazione di appositi file .css che estendano le classi css di Bootstrap sovrascrivendo le impostazioni standard, la seconda prevede la gestione delle variabili offerte dal framework al fine di creare un file bootstrap.css con le impostazioni desiderate.

In questo articolo vedrai come personalizzare Bootstrap, utilizzando il secondo approccio, attraverso SASS. Questo approccio rappresenta il miglior modo per avere un bootstrap.css personalizzato senza dover ricorrere a personalizzazioni successive.

Installazione di Sass e Bootstrap5

Per poter creare il proprio file bootstrap.css personalizzato avrai bisogno del comando SASS e dei sorgenti del progetto Bootstrap.

Installazione di SASS

Il modo più semplice per installare SASS è utilizzare la riga di comando ed il gestore dei pacchetti npm.

Per installare SASS eseguiamo:

npm install -g sass

Il precedente comando, qualora lo esegui per installarlo sulla tua distribuzione, potrebbe aver bisogno di privilegi di sudo. Nel caso tu debba eseguire il comando con tali privilegi eseguiremo:

sudo npm install -g sass

Se il tuo utente non ha privilegi di sudo, leggi l'articolo come aggiungere utenti al gruppo sudo

Una volta eseguita l'installazione, verifica che il comando sia presente digitando:

sass --version

L'output restituisce la versione del comando installata. Bootstrap5 suggerisce di installare la versione di SASS denominata Dart Sass.

Sorgenti di Bootstrap

Per poter personalizzare Bootstrap, è necessario scaricare i sorgenti del progetto.

Scaricati i sorgenti decomprimi l'archivio come segue:

unzip NOME_ARCHIVIO

A questo punto avrai la cartella dei sorgenti di Bootstrap5. Nella cartella è presente una cartella scss nella quale sono contenuti i file del framework. Per convertire i file scss in un file css usiamo il seguente comando:

cd ROOT_CARTELLA_SORGENTI_BOOTSTRAP
sass scss/bootstrap.scss /tmp/bootstrap.css

Il precedente comando crea il file bootstrap.css all'interno della cartella /tmp. Ovviamente il path che ospita l'output del comando, potrai sceglierlo liberamente dove vorrai.

Il file prodotto tuttavia non prevede alcuna personalizzazione poiché hai compilato la versione standard liberamente scaricabile dal sito. Puoi notare, infatti, che il file scss/bootstrap.css ha al suo interno tutti riferimenti ai file presenti nella cartella scss che implementano la sintassi del bootstrap.

Principi da conoscere prima della compilazione

Sei pronto per cominciare a personalizzare e compilare il tuo file di Bootstrap5. Prima di iniziare, è importante sottolineare dei principi che dovrai seguire per effettuare una corretta compilazione.

Non editare alcun file di bootstrap contenuto nella cartella dei sorgenti. Come ogni dipendenza da librerie esterne, la cartella dei file sorgenti cambia nel tempo col passare delle versioni di Bootstrap. Se modifichi file nella libreria non potrai aggiornarla in seguito, poiché i file conterranno i tuoi aggiornamenti.
Il file bootstrap.scss contiene tutti i riferimenti a file .scss da compilare. Questo file è il principale che controlla quali componenti installare.
Il file _variables.scss contiene la definizione di tutte le variabili usate da Bootstrap5. Aprendo il file, potrai notare che ogni variabile presenta la stringa !default alla fine, che rappresenta la possibilità di modificare il valore della stessa. Tutte le variabili definite da Bootstrap sono modificabili.

Personalizza il tuo tema

Ma se non puoi modificare la cartella dei sorgenti di Bootstrap, come puoi modificare il layout finale?

Per prima cosa crea, all'interno di una cartella del tuo progetto, la cartella scss. All'interno di questa cartella crea il file custom.scss. Il file creato è il nuovo file principale da compilare.

All'interno del file custom.scss, andrai ad inserire le direttive che indicheranno i pacchetti da installare ed indicherai le tue modifiche.

A questo punto hai due strade possibili per la personalizzazione:

Importare tutti i file di bootstrap inserendo solamente le tue personalizzazioni
Importare solamente i pacchetti di bootstrap che intendi utilizzare e le tue personalizzazioni

Importare tutti i pacchetti di bootstrap5

Il file custom.css che importa tutti i file Bootstrap5 è il seguente:

// Includere le variabili da sovrascrivere
@import "PATH_CARTELLA_BOOTSTRAP/scss/bootstrap";

// Aggiungi qui codice personalizzato

Nel precedente blocco di codice sostituisci PATH_CARTELLA_BOOTSTRAP con il path alla cartella che abbiamo decompresso in precedenza.

Come puoi osservare l'istruzione

@import "PATH_CARTELLA_BOOTSTRAP/scss/bootstrap";`

importa il file bootstrap.scss che precedentemente avevi compilato. Questo nuovo file per ora è equivalente al file di Bootstrap, in esso andrai ad inserire le personalizzazioni.

Se ad esempio volessi modificare il colore di background della pagina, potrai scrivere:

// Includere le variabili da sovrascrivere
$body-bg: #000;

@import "PATH_CARTELLA_BOOTSTRAP/scss/bootstrap";

// Aggiungi qui codice personalizzato

Con la definizione $body-bg: #000; hai impostato il colore di background sul nero.

Importare soli pacchetti Bootstrap5 necessari

Per importare i soli pacchetti Bootstrap5 dei quali abbiamo necessità, il file custom.scss dovrà prevedere la seguente sintassi:

// 1. Include le funzioni come primo import
@import "PATH_CARTELLA_BOOTSTRAP/scss/functions";

// 2. Includere la definizione delle variabili da sovrascrivere

// 3. Includere gli stili dall'installazione Bootstrap
@import "PATH_CARTELLA_BOOTSTRAP/scss/variables";
@import "PATH_CARTELLA_BOOTSTRAP/scss/mixins";

// 4. Includere i componenti (opzionali) di Bootstrap
@import "PATH_CARTELLA_BOOTSTRAP/scss/root";
@import "PATH_CARTELLA_BOOTSTRAP/scss/reboot";
@import "PATH_CARTELLA_BOOTSTRAP/scss/type";
@import "PATH_CARTELLA_BOOTSTRAP/scss/images";
@import "PATH_CARTELLA_BOOTSTRAP/scss/containers";
@import "PATH_CARTELLA_BOOTSTRAP/scss/grid";

// 5. Aggiungere eventuale codice opzionale

Come si evince dall'esempio, in questa modalità avrai il totale controllo di ciò che sarà presente all'interno del file bootstrap.css esito della compilazione.

Compilare file personalizzato

Quando avrai inserito tutte le modifiche all'interno del file custom.scss, potrai compilare il file per ottenere il file da includere nelle pagine html.

Per compilare il file esegui:

cd CARTELLA_SCSS_TUO_PROGETTO
sass custom.scss bootstrap.css

Il precedente comando, eseguito all'interno della cartella nella quale hai inserito il file custom.scss, crea il file bootstrap.css da utilizzare, che recepisce tutte le modifiche dichiarate.

Conclusioni

In questo articolo hai visto come installare, configurare e compilare Bootstrap5 al fine di ottenere un file bootstap.css da importare all'interno dei tuoi progetti.

Le personalizzazioni che potrai apportare al Bootstrap ti consentiranno di rendere unico il tuo sito restando allineato al più utilizzato framework al mondo. Inoltre, attraverso le modalità di aggiornamento proposte, potrai in qualsiasi momento aggiornare la versione di Bootstrap utilizzata, mantenendo tutte le personalizzazioni inserite.