Nel mondo del front-end i fogli di stile sono sicuramente un aspetto fondamentale nella struttura generale di un’applicazione, sito internet, ecommerce o altro.
Basta pensare che è un argomento che si va ad intersecare anche con studi di UI (User Interface) e UX (User Experience) design.
Presentarsi nel modo migliore e più efficace, è di fatto una delle armi vincenti per avvalorare il nostro spazio web, oltre all’usabilità del sito stesso.
Sappiamo benissimo che i fogli di stile vengono letti tramite CSS (Cascading Style Sheets) e normalmente anche scritti tramite lo stesso linguaggio.
Tuttavia dal 2015 (anno dell’ultima versine rilasciata) è stata sviluppata un’estensione che permette di organizzare i fogli di stile in maniera decisamente più performante: Sass (Syntactically Awesome StyleSheets).
Ricordati che prima di poter utilizzare il SASS è necessario installarlo. Consulta la documentazione ufficiale per scoprire come fare.
1 – Cos’è SASS?
In una frase: “il nuovo modo di scrivere fogli di stile“. Intendiamoci questo non vuol dire che il CSS sia “morto”, anzi, ricordiamoci che rimane comunque il linguaggio letto dal browser per renderizzare fogli di stile.
Ma in effetti il SASS è letteralmente il nuovo modo di SCRIVERE fogli di stile, o almeno il modo più consigliabile ormai.
Ho volutamente messo in evidenza che ci si avvale del SASS per scrivere il codice poichè a differenza del CSS, questa estensione ha bisogno di essere processata per generare infatti proprio fogli di stile ottimizzati in CSS.
Collegare una pagina HTML ad un foglio di stile SASS non permetterà al browser di leggere le regole di stile poichè non leggibile da quest’ultimo.
SASS e CSS quindi coesistono. Il primo serve per una scrittura performante di regole di stile, il secondo serve per fornire il linguaggio adatto ai browser.
Come ogni linguaggio anche il SASS ha la sua sintassi specifica, ma la buona notizia è che somiglia moltissimo a quella CSS, perciò molto facile da imparare se si hanno già buone nozione di quest’ultimo.
Esiste inoltre una forma intermedia di scrittura in SASS, ed è l’SCSS. E’ sostanzialmente un ibrido tra la sintassi SASS e quella CSS.
2 – Caratteristiche
Le caratteristiche dietro SASS sono numerose e ci aiutano a comprendere proprio l’utilità di questa estensione in termini di praticità, velocità ed organizzazione:
Variabili
La prima caratteristica lampante di SASS è il fatto che permette la dichiarazione di variabili. Potrebbe sembrare banale come caratteristica ma, per chi scrive codice, avvalersi di variabili rende le modifiche e le implementazioni molto più veloci e logicamente dinamiche.
Per indicare una variabile in SASS basta utilizzare il simbolo del dollaro ($) prima del nome della variabile, come in altri linguaggi ad esempio PHP:
$variabile = #fff;
body{background-color: $variabile;}
Nidificazione
Anche questa caratteristica, semplice quanto mai utile, per organizzare il codice in maniera più chiara, permettendo quindi una lettura veloce a vantaggio dei tempi di modifica.
La nidificazione spesso viene sottovalutata in tutti i linguaggi di programmazione, eppure chi scrive codice da tempo sà quanto sia importante nidificare ed indentare correttamente le linee di codice.
Leggere un documento nidificato ed indentato molto bene rende il tutto più fluido, quindi veloce e quindi più efficace.
Oltretutto può capire di lavorare su alcuni progetti anche in team e permettere ad un collega di leggere in maniera chiara il lavoro precedente non rallenterà il lavoro ma anzi lo ottimizza:
//SCSS
$variabile = #fff;
body{
background-color: $variabile;
.box{color: #f00;}
}
//CSS
body{background-color: #fff;}
body .box{color: #f00;}
Importazione
E’ usuale, quando si organizza un progetto, stabilire anche un’organizzazione nella divisione dei fogli e del loro contenuto.
Ad esempio per quanto riguarda i fogli di stile si potrebbe organizzare, a vantaggio di un’ordine maggiore, un foglio per le regole generali ed un foglio per delle regole più specifiche.
La keyword per importare un altro foglio dentro quello generale è “@import” ed i file da importare devono essere necessariamente nominato con l’underscore prima del nome, ad esempio “_test.scss“:
//_test.scss
$variabile = #fff;
.box{color: #f00;}
//main.scss
@import ‘test’;
body{background-color: $variabile;}
//CSS
body{background-color: #fff;}
body .box{color: #f00;}
Modularità
Molto simile al concetto dell’implementazione, anche la modularità è una caratteristica utilissima del SASS.
Vi sarà sicuramente capitato, scrivendo codice, di dover ripetere porzioni di regole assolutamente identiche per più tag, classi o id.
Appesantire il codice con regole ripetitive non è mai una soluzione ottimale, in questo quindi ci aiuta il SASS, dandoci la possibilità di creare dei moduli salvati dentro una variabile.
A quel punto sarà sufficiente richiamare la variabile interessata per indicare lo stesso numero di regole ma ottimizzando di molto il codice:
//SASS
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
//CSS
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Operatori di calcolo
Di grandissima elasticità è la caratteristica di poter utilizzare operatori di calcolo all’interno del valore di una proprietà.
Molto utile per organizzare in maniera “responsive” il layout del nostro sito, ma anche molto altro:
//SASS
.container {
width: 100%;
}
article[role=”main”] {
float: left;
width: 600px / 960px * 100%;
}
aside[role=”complementary”] {
float: right;
width: 300px / 960px * 100%;
}
//CSS
.container {
width: 100%;
}
article[role=”main”] {
float: left;
width: 62.5%;
}
aside[role=”complementary”] {
float: right;
width: 31.25%;
}
3 – Vantaggi
Abbiamo quindi analizzato alcune delle più utili caratteristiche proprie del SASS e SCSS:
- Utilizzo di variabili
- Possibilità di nidificare ed indentare il codice in maniera chiara
- Importare file ed organizzare in maniera partizionata i fogli di stile
- Creazione di moduli dentro una variabile
- Possibilità di poter effettuare calcoli matematici
I vantaggi dell’utilizzo del SASS quindi sono:
- Organizzazione migliore del codice
- Codice più snello, e quindi file meno pesanti
- Codice dinamico grazie all’utilizzo di variabili e moduli
- Codice performante tramite combinazioni
E’ infatti questo il vantaggio migliore da poter sfruttare, ovvero combinare insieme tutte queste caratteristiche. Prese singolarmente possono sembrare poca cosa, ma vi assicuro che scrivere fogli di stile combinando tutta questa serie di funzionalità tra loro vi farà apprezzare tantissimo questo linguaggio.
Nel caso vogliate approfondire altre caratteristiche ed utilizzi vi consiglio di consultare la documentazione ufficiale di SASS.
Buon sviluppo!