Sass è un’estensione del linguaggio CSS, un preprocessore che permette di gestire i fogli di stile in modo più organizzato, semplice e modulare. Sass permette di lavorare con i fogli di stile in modo molto simile ai linguaggi di programmazione, permettendo di creare variabili da usare come valori in tutti i selettori che si desidera: il vantaggio è che non è necessario ricordare il valore esadecimale o RGB di un colore se questo viene salvato in una variabile come $colore-principale, $rosso-trasparente o con qualsiasi nome che ci ricorda lo scopo di quella variabile. A questo punto, se vogliamo inserire quel colore per il testo, basterà inserire la variabile come valore.
Un’altra funzionalità molto importante di Sass è il mixin, una sorta di blocco che contiene più dichiarazioni di proprietà CSS che può essere richiamato in parti diverse del file. In questo modo non dobbiamo scrivere più volte diverse proprietà ma basta richiamare la funzione con la direttiva @include. Le direttive @use e @extend sono più specifiche: la prima importa un file mentre la seconda permette di ereditare lo stile di un altro selettore.
Ad esempio, possiamo creare delle basi per i riquadri e i pulsanti e creare selettori per elementi specifici che hanno le proprietà delle basi oltre ad altre che personalizziamo noi. Per dei semplici siti, tutte queste funzionalità potrebbero non interessare ma per grandi progetti o per la creazione di template e framework l’uso di un preprocessore come Sass si rivela fondamentale.
Come si usa Sass
L’estensione al linguaggio CSS può essere installato in diversi modi a seconda dell’ambiente di sviluppo che si usa. Se si ha bisogno soltanto di compilare i file di Sass in CSS automaticamente senza bisogno di organizzare i file in cartelle separate o semplicemente per studio o piccoli progetti, si può installare un’estensione al proprio editor che si occupa di tutto. Ad esempio, in VS Code è disponibile l’estensione Live Sass Compiler, di Glen Marks. Questa estensione è molto semplice: al centro o sul lato destro dell”ultima barra in basso apparirà la scritta Watch Sass; attivandola, l’estensione cercherà tutti i file da convertire in CSS.
Questo preprocessore supporta due estensioni per i suoi file. L’estensione .scss ha una sintassi uguale a quella dei file CSS con le parentesi graffe e i punti e virgola; l’estensione .sass è più lineare, non richiede l’uso di questi simboli ma è meno usata e l’editor nono supporta questa estensione se lavoriamo usando soltanto il Live Compiler consigliato sopra.
Possiamo scrivere il codice CSS standard su un file Sass. Quindi, se abbiamo già i nostri fogli di stile, possiamo rinominarli con estensione .scss, e aggiungere il codice che ci interessa. Possiamo creare dei file per le variabili, per i mixin e per lo stile di blocchi o elementi specifici, a seconda del tipo di progetto che stiamo facendo.
Facciamo un esempio. Invece di ripetere più volte le proprietà per creare un contenitore flessibile con gli elementi centrati disposti uno sotto l’altro, possiamo creare un mixin che viene richiamato ogni volta. Il codice sotto:
@media screen and (min-width:768px) {
body {
display: flex;
flex-direction: column;
align-items: center;
}
#contenitore-principale {
width: 800px;
}
}
.d-none {
display: none;
}
@media screen and (min-width:567px) {
.d-md-block {
display: block;
}
}
#contenitore-principale {
display: flex;
flex-direction: column;
align-items: center;
}
Diventerà più semplice:
@mixin flex-column-content-center {
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (min-width: 768px) {
body {
@include flex-column-content-center();
}
#contenitore-principale {
width: 800px;
}
}
.d-none {
display: none;
}
@media screen and (min-width: 567px) {
.d-md-block {
display: block;
}
}
#contenitore-principale {
@include flex-column-content-center();
}
In questo modo, avremo un codice molto più leggibile, modulare e organizzato mentre il file CSS compilato verrà importato e usato dal nostro sito.