Bootstrap 5: SASS e siti web

Come usare SASS con Bootstrap 5

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 04 Marzo 2023
Categoria: Web Marketing Bootstrap 5: SASS e siti web

Sass (Syntactically Awesome StyleSheets) è un precompilatore CSS che genera file CSS e permette di usare variabili, creare funzioni, strutture di controllo. organizzare il foglio di stile in più file (utile quando si creano grandi progetti), sovrascrivere le proprietà di default di Bootstrap e altro, semplificando così sviluppo, manutenzione e personalizzazione del CSS. Bootstrap, il popolare framework front-end per lo sviluppo di siti web, utilizza SASS per la sua gestione dello stile e del layout. Questo significa che tutti i file CSS di Bootstrap sono stati scritti utilizzando la sintassi di SASS e possono essere personalizzati utilizzando i file SASS forniti con il framework.
Quando lavoriamo con SASS, possiamo usare 2 formati: i file .scss (Sassy CSS, simile a CSS e quindi più semplice per chi già conosce i fogli di stile) e .sass (minimalista, non ha, al contrario di .scss, punti e virgola e graffe). Entrambi i formati hanno le stesse funzionalità, cambia solo la sintassi.

Sommario Bootstrap: SASS e siti web

• Sintassi .scss e .sass a confronto
• Come utilizzare SASS
• Bootstrap e SASS

Sintassi .scss e .sass a confronto

Come utilizzare SASS

Per poter utilizzare SASS occorre installarlo all’interno di un altro software come, ad esempio, Atom. Per farlo occorre scaricare Node.js e node-sass, e poi usare il prompt dei comandi (la cosiddetta Console raggiungibile scrivendo Prompt sulla barra di ricerca del proprio computer). Ecco la procedura step by step:

1. Installa Node.js da nodejs.org/it scegliendo la versione consigliata
2. All’interno di Node, installa node-sass (precompilatore SASS). Per farlo cerca su Google node sass autocompile atom che rimanda all’URL atom.io/packages/sass-autocompile; si installeranno vari software tra cui il linguaggio di programmazione Phyton
3. Apri il prompt dei comandi e digita npm install node-sass -g per installare node-sass
4. Verifica che l’installazione di node-sass sia avvenuta correttamente digitando dal prompt dei comandi node-sass -v
   Se viene mostrata la versione del software stai procedendo bene e quindi puoi chiudere il prompt dei comandi
5. Scarica Atom da atom.io (editor di testo e IDE open source sviluppato da GitHub) e installalo
6. Apri Atom e vai su File > Settings e poi Install e, in Search package, cerca il file sass-autocompile, clicca Install per installare SASS dentro Atom
7. Da File > New File salva un file test.sass sul Desktop per vedere se il precompilatore funziona: se crea un file test.min.css funziona.
   Se infatti da Atom scrivi (ad esempio tramite sintassi .sass):
   body
               background: red
   e salvi, il programma creerà, dentro test.min.css, la sintassi seguente:
   body{background:red}

Ecco un esempio che parte da zero (con sintassi .sass):

1. Crea un file index.html
2. Digita l’emmet html e dai Invio
   Se non funziona scarica il Package Emmet (occhio, solo Emmet!):
   File > Settings e poi Install e, in Search package, cerca Emmet
3. Nel body di index.html inserisci
   <div class="container">
<p>Lorem e dai Invio</p>
</div>
Nell’head digita l'emmet link per inserire
<link rel="stylesheet" href="style.min.css">
Salva il file

4. Crea style.sass e scrivici
   .container
       max-width: 500px
       margin: 0 auto
       border: 1px solid red
       p
           color: lime
   Quando salvi il file style.sass verrà creato un file style.min.css con il CSS consueto

Bootstrap e SASS

Dalla versione 4 Bootstrap è sviluppato in SASS, è quindi possibile modificare il framework a tuo piacimento. Serve però capire cosa sono i partials; essi sono file SASS il cui nome inizia con un underscore. Come suggerisce il nome, sono fogli di stile parziali, codici SCSS che verranno importati nei tuoi file SCSS per richiamare determinate proprietà dei componenti Bootstrap. Ecco come procedere per usare SASS con Bootstrap:

1. Scarica la versione di Bootstrap in SASS da getbootstrap.com/docs/5.1/getting-started/download scegliendo Source files
2. Crea una cartella sul Desktop Bootstrap-SASS e al suo interno inserisci:
1. un file index.html creato con Atom che, d'ora in poi, userai per creare tutti i file del progetto
2. una cartella scss e qui dentro:
1. una cartella bootstrap
2. main.scss
3. _base.scss dentro questo partial scrivi //main: main.scss per specificare a chi fa riferimento
4. _variables.scss dentro questo partial scrivi //main: main.scss per specificare a chi fa riferimento
3. una cartella javascript
3. Atom crea main.min.css dentro la cartella scss, ma non ti serve quindi cancellalo
4. In main.scss scrivi //compileNested: ../$1.nested.css (compila con lo stile nested fuori dalla cartella scss, nome del file scss $1)
   Atom crea un file vuoto main.nested.css nella cartella Bootstrap-SASS
5. In main.scss scrivi:
   @import "variables";
   @import "base";
6. In _base.scss scrivi:
   body{
   background:#000
   }
   Salva tutto. Se hai fatto bene, in main.nested.css è comparso il codice CSS
7. In index.html crea l’emmet html e nell’head, tramite l’emmet link il richiamo al file main.nested.css; poi controlla che lo sfondo sia diventato nero
   Se è così, sei pronto per accogliere i file di Bootstrap
8. Decomprimi la versione di Bootstrap in SASS che hai scaricato nel punto 1 di questa lista, vai nella sua cartella scss e copia tutto il contenuto nella cartella bootstrap del tuo progetto
1. Apri bootstrap.scss dal tuo progetto, copia da //Configuration fino alla fine e incolla nel tuo file main.scss dopo @import "variables"; ma prima di @import "base";
2. Metti il tuo @import "variables"; subito dopo quello che hai incollato (sembrano uguali ma hanno percorsi diversi)
3. Tendendo premuto CTRL clicca subito dopo le virgolette di apertura di ogni @import, a eccezione dei tuoi 2 @import e scrivi bootstrap/
4. Salva tutto per importare Bootstrap nel tuo progetto (lo puoi verificare aprendo main.nested.css)
5. Eventualmente, per rendere più leggero Bootstrap, puoi ottimizzarlo in base al tuo progetto commentando, in main.scss, le partials che non ti servono e risalvando
9. Testa il tuo Bootstrap:
1. nel file decompresso della versione di Bootstrap in SASS entra in dist/js/bootstrap.bundle.min.js e copia questo file nella cartella javascript di Bootstrap-SASS
2. prendi il componente navbar e incollalo nel file index.html, salva tutto
3. apri nel browser il file index.html e vedrai che stai già sovrascrivendo, con il tuo _base.scss, la proprietà colore dello sfondo di Bootstrap (che di default è bianco invece il tuo è nero)
10. Lavora sulle variabili:
1. vai nel partial bootstrap/variables del tuo progetto dove ci sono tutte le variabili di Bootstrap, copia ogni riga di codice e incollale nel tuo _variables.scss; poi commenta tutto (CTRL+Shift+7 commenta/decommenta) e decommenta solo ciò che vuoi cambiare perché le altre variabili vengono già prese dall’origine iniziale
2. per modificare l’altezza della navbar decommenta $navbar-padding-y che è il padding verticale della navbar: anziché $spacer * .5 !default; modifica in $spacer * .9;
3. sii lungimirante e immagina cosa potrai fare studiando tutte le variabili che hai di fronte o che trovi nella documentazione dei componenti che prendi da getbootstrap.com!

Scarica lo zip con gli esempi di questo tutorial

Se Bootstrap: SASS e siti web ti è piaciuto, condividilo!

Per saperne di più sul Web Marketing potrebbero interessarti questi libri: