Sintassi e prime basi SASS: parte prima

Pubblicato il 14/09/2015

Abbiamo visto in un precedente articolo cosa sia SASS e abbiamo anche accennato alle sue funzioni principali, quelle che potranno velocizzare il nostro lavoro di molto; in questo articolo vedremo qualche esempio pratico base per illustrarne la potenza e la facilità d'uso.

Le funzionalità principali di SASS sono:

• Le variabili
• Le operazioni
• Le regole annidate
• Le funzioni (mixins)
• Le importazioni di file e librerie

vediamole nel dettaglio!

 

Le variabili in SASS

Come in tutti i linguaggi di programmazione anche SASS gestisce le variabili in un modo molto semplice: dichiarandole e successivamente utilizzandole nel codice. Supponiamo, ad esempio, di voler creare un sito che abbia lo sfondo nero, i bordi delle classi pippo e pluto nonché tutti i testi bianchi. Il codice css che utilizzeremo sarà questo:

codice CSS

body {background:black;}
	* {color:white;}
	.pippo {border-color:white;}
	.pluto {border-color:white;}

Se, domani, volessimo utilizzare invece che il bianco un altro colore, ad esempio il giallo, dovremmo riaprire tutto il nostro codice, spulciare riga per riga e sostituire manualmente il valore white con yellow. Certo, potremmo usare le funzioni di trova e sostituisci dei vari programmi che utilizziamo per scrivere css, però nessuno ci potrà assicurare che il risultato sperato sia identico a quello voluto.

Con SASS potremmo fare invece così:

codice SCSS

$coloreSfondo:black;
$coloreTesto:white;
$coloreBordo:$coloreTesto;
	
body {background:$coloreSfondo;}
	* {color:$coloreTesto;}
	.pippo {border-color:$coloreBordo;}
	.pluto {border-color:$coloreBordo;}

In pratica abbiamo creato delle variabili, con nomi esplicativi, assegnato loro un valore iniziale, e utilizzato quel valore nelle regole CSS. Quando compileremo quel codice otterremo il file CSS identico a quello di sopra. Ma se domani volessimo cambiare il colore del bordo, ci basterebbe dare:

$coloreBordo:yellow;

e saremmo apposto.
Vi faccio notare poi come sia possibile assegnare a una variabile il valore di un'altra variabile precedentemente dichiarata. In tal modo decidiamo di dare lo stesso valore a due variabili diverse, lasciandoci però la porta aperta in futuro di poterne cambiare solo una lasciando invariata l'altra

Credo che, se non siete tra quelli che scrivono CSS ogni giorno e che non hanno mai usato un pre-processore CSS, vi stia venendo l'acquolina alla bocca pensando alle potenzialità di un simile approccio! La comodità di un codice scritto con variabili è assoluta, sia sotto l'aspetto della manutenibilità dei progetti in corso che sul possibile riutilizzo del codice in progetti futuri. Aggiungeteci il fatto che molti, tra i framework CSS più diffusi, vengono rilasciati anche per SASS ed il gioco è fatto. Non sarete più costretti a usare temi personalizzati con fogli di stile ad hoc, non sarete più costretti a cercare nei meandri del codice quel valore che sballa il tutto. Vi basterà aggiornare le variabili colore con ciò che vi serve e siete apposto.

Ma non finisce qui. Potrete usare le variabili per qualunque altro valore, quali dimensioni, proprietà, valori etc, come ad esempio:

$coloreSfondo:black;
$larghezzaColonna1:300px;
$opacitaAnnunci:0.8;
$gradiRotazioneBloccoX:30deg;
$pesoIntestazioni:bold;

e così via. In particolare poi, sulle dimensioni è possibile utilizzare anche la seconda feature della lista:

Le operazioni in SASS

SASS permette inoltre di assegnare valori alle variabili come il risultato di operazioni matematiche.
Come sempre, un esempio vale più di mille parole. Supponiamo di avere un template a 3 colonne con html e css seguenti

codice HTML

codice CSS

.contenitore {width:1080px;}
	.colonnaSinistra {width:200px; padding:0 20px;}
	.colonnaCentrale {width:560px; padding:0 20px;}
	.colonnaDestra {width:200px; padding:0 20px;}

Chiunque scrive codice sa che, una volta scelto il valore delle colonne laterali, debba farsi due conti per ottenere il valore di 560px di quella centrale. In pratica per ottenerlo si utilizza una calcolatrice (o si fa a mente) il seguente calcolo: Colonna centrale=1080-200-200-6*20=560px. 

Se poi si aggiunge la necessità di cambiare i valori, vuoi perché si vuol fare la versione per schermi mobile, vuoi perché le colonne laterali servono più larghe o per mille altri motivi ancora, il numero di operazioni da fare aumenta a dismisura, con possibili errori di calcolo e risultati rivedibili.

 

Come ci viene in aiuto SASS? Beh, con le principali operazioni (somma [+], differenza [-], prodotto [*], divisione [/] e resto [%]) integrate nel linguaggio. Sarà lui a fare i conti per noi, in questo modo:

codice SCSS

$contenitore:1080px;
$colSx:200px;
$colDx:200px;
$paddingColonne:20px;
$colCentrale:$contenitore - $colSx - $colDx - 6*$paddingColonne;
	
.contenitore {width:$contenitore;}
	.colonnaSinistra {width:$colSx; padding:0 $paddingColonne;}
	.colonnaCentrale {width:$colCentrale; padding:0 $paddingColonne;}
	.colonnaDestra {width:$colDx; padding:0 $paddingColonne;}

Se domani volessimo portare la larghezza della colonna destra da 200 a 300px ci basterà cambiare

$colDx:300px;

e il gioco sarà fatto. Attenzione: non so se avete notato, ma il segno - è preceduto da uno spazio. Prestateci attenzione: se manca quello spazio il compilatore non riconosce il segno - come un'operazione ma con un trattino. E darebbe errore.

Ovviamente le operazioni possono esser utili non solo nella definizione delle variabili ma in qualunque punto del codice. Sempre rispetto all'esempio di prima, avremmo potuto fare a meno di dichiarare e calcolare il valore della colonna centrale come variabile a sé stante per farlo al volo nel codice stesso così:

	.colonnaCentrale {width:$contenitore - $colSx - $colDx - 6*$paddingColonne; padding:0 $paddingColonne;}

In casi come questi dipende un po' dalle scelte personali come sfruttare la cosa. Io preferisco sempre il primo caso per una maggiore semplicità di lettura del codice in futuro. Conosco e capisco chi usa il secondo per la scelta di non far proliferare le variabili pena eccessiva frammentazione del codice. Per semplificare: so' gusti! :P

 

Le regole annidate in SASS

Una delle funzioni più utili e più usate in SASS è il codice annidato. Una volta provato non potrete più farne a meno, vi avverto!
Come funziona?
Anche qui, iniziamo con un esempio, scrivendo del css per una lista non ordinata

codice CSS

ul.menuBottom {margin:0; padding:0; list-style:none;}
	ul.menuBottom li {display:inline-block; width:100px; height:20px; line-height:20px; padding:0 20px;}
		ul.menuBottom li a {display:block; color:red;}
			ul.menuBottom li a:hover {color:blue;}
		ul.menuBottom li.first {padding-left:0;}
		ul.menuBottom li.last {padding-right:0;}

Come noterete molto codice è ridondante, e il rischio di fare errori è sempre presente. Con SASS è possibile scrivere lo stesso codice in questo modo:

codice SCSS

ul.menuBottom {margin:0; padding:0; list-style:none;
	li {display:inline-block; width:100px; height:20px; line-height:20px; padding:0 20px;
		a {display:block; color:red;
			&:hover {color:blue;}
		}
		&.first {padding-left:0;}
		&.last {padding-right:0;}
	}
}

Il codice scritto in tal modo è evidentemente molto più leggibile e snello di quello precedente.
Spero poi abbiate notato il simbolo &: serve a definire lo stesso valore dell'annidamento precedente. Per sfruttare ancor di più l'annidamento, SASS ci viene incontro con le ereditarietà.

 

Ereditarietà (extend) in SASS

Tale proprietà ci permette di estendere una classe in questo modo:

.classe {background:black;
		em, strong {color:red}
	}
.classeBordoArancio {
	@extend .classe;
	border:1px solid red;
}

In pratica, utilizzando l'extend si possono usare le proprietà di una classe, aggiungendo o modificandone alcune, senza dover riscrivere tutte le regole da capo. Come immaginerete, tale funzione è utilissima nello sviluppo e ancor di più nella manutenzione

per oggi ci fermiamo qui. Nel prossimo articolo continueremo il discorso sui vantaggi di SASS: mi raccomando, continuate a seguirci!

Altri articoli sullo stesso argomento

• Introduzione a SASS e LESS
• Variabili, operazioni, operazioni, annidamento ed extend in SASS
• Funzioni, importazioni, librerie e framework in SASS