Le variabili in Sass ed i file parziali costituiscono una delle ragioni più importanti che spingono gli sviluppatori web ad utilizzare un pre-processore css.
Utilizzare i file parziali
Sass permette l’utilizzo di file parziali che possono essere visti come dei segmenti di file più corposi. Per far riferimento ai parziali all’interno di un foglio di stile si utilizza sempre la direttiva @import di css, solo che quando i file scss/sass saranno pre-processati il contenuto del parziale sarà inserito direttamente nel file css prodotto. Questo rappresenta un notevole vantaggio in quanto a differenza del passato la direttiva import non viene più utilizzata per far caricare diversi fogli di stile esterni. Per convenzione un file parziale deve iniziare con l’underscore questo per permettere al pre-processore di capire che quel file non deve essere trasformato in un file css ma verrà utilizzato per essere importato all’interno dei file scss/sass.
Ad esempio nel seguente pezzetto di codice, vengono importati dei file parziali all’interno di un file scss/sass e diventa chiaro come raggiungere i benefici di un design modulare.
Ovviamente i tre file saranno: ‘includes/_variables.scss’, ‘includes/_general.scss’ e ‘includes/_home.scss’.
@import 'includes/variables'; @import 'includes/general'; @import 'includes/home';
Utilizzare le variabili
Le variabili permettono di assegnare dei nomi a valori speciali di alcune proprietà come i colori, le grandezze oppure le famiglie dei font. Grazie a questa proprietà è possibile evitare duplicazioni di tali valori e quindi rendere il codice più facile da modificare.
Ad esempio considerando il seguente pezzo di codice:
$light-gr: "#676767";
$open-font: 'Open Sans','Arial',sans-serif;
$normal-text-size: 16px;
$primary-font: $open-font;
$text-color: $light-gr;
$text-size: $normal-text-size;
body {
font-size: $text-size;
color: $text-color;
font-family: $primary-font
}
è facile notare come modificando una sola volta il valore delle variabili riusciamo a riflettere le modifiche in tutti i file scss/sass che le utilizzano.
Variabili e parziali sono solo l’inizio
I vantaggi sono evidenti, abbiamo facilità di manutenzione ed un sistema modulare pensato per il riuso.
La facilità di manutenzione è data dal fatto che un singolo insieme di stili viene scritto all’interno di un singolo file. Ad esempio gli stili per la homepage, verranno inseriti all’interno del parziale _home.scss.
Il sistema modulare si può realizzare organizzando e suddividendo i parziali per funzionalità logica e ambito di interesse, creando una sorta di framework da riutilizzare all’interno dei vari fogli di stile.
Ad esempio una suddivisione organizzata dei parziali potrebbe prevedere le seguenti aree:
- colori
- typografia
- griglia(layout)
- reset
- stile base
- form
- tabelle
- navigazione
- footer
- header
Infine un paio di link utili per approfondire la tematica:
- Sass: A Designer’s Perspective (viget.com)
- How to structure a Sass project (thesassway.com)