Caso d'uso: ti è mai capitato?

Stai lavorando ad un grosso sito da mesi. 
Ti è stato approvato il progetto grafico in photoshop, il layout in wireframe, la prova di grafica statica e  oramai sono giorni e giorni che stai montando tutto in HTML e CSS. Insomma, hai quasi finito. 
Improvvisamente il tuo capo ti balza dietro la schiena e esclama una frase che ti fa gelare il sangue:

"Il Cliente ha cambiato idea. Il colore aziendale non sarà più blu, ma verde. Devi cambiare tutta la grafica!".

Dopo un attimo di panico ti riprendi, tralasci il gusto estetico del cliente e rispondi con ottimismo:

"Che sarà mai! Farò una ricerca automatica nel mio file CSS dell'esadecimale di quel bel blu con un buon verdone militare e tutto è fatto!".

Poi però realizzi che non è così semplice.

Nel tuo kilometrico file CSS, oltre al suddetto blu pieno, dovrai cercare anche la gradazione di blu più chiara che hai usato per i bottoni della header, quella un pochino più scura che ti è servita per i link del footer.. e che dire della gradazione convertita in RGBA che è servita per il pannello di descrizione semitrasparente sulle immagini in galleria?

Guardi le 3000 righe di codice CSS davanti a te.
In un solo istante, la sola idea del cambio di un semplice colore ti fa venire la nausea.

Come ti può essere utile SCSS in un caso simile?

Con SCSS è possibile creare dei "segnaposto" (ossia delle variabili) che etichettino un elemento a prescindere dal suo contenuto.

Hai pesente quando ti danno da firmare un contratto?
All'inizio ti fanno compilare "Io sottoscritto Mario Rossi..." con e tutti i tuoi dati, ma se all'interno del contratto devono nominarti, non ti fanno riscrivere il tuo nome e le tue informazioni ma scriveranno solo, per esempio, "l'intersatario".
Questo fa risparmiare tempo perchè scriverai il tuo nome una volta sola e nel caso l'intestatario cambi, basterà cancellare il nome una sola volta e riscriverlo che il contratto non perderà di senso compiuto.

Bene, "intestatario" è la variabile, a cui assegno il valore "Mario Rossi".

 

Torniamo ora al nostro blu e al verdone con cui sostituirlo.

Creiamo una variabile chiamata $primary-color. E' un nome a piacere, ma è più corretto che descriva ciò che rappresenterà. Chiamarlo $giuseppino, non ci aiuterà a orientarci nel codice.

Il segno "$" (dollaro) davanti al nome indica a SCSS che stiamo creando una variabile. Il nome di variabile non deve avere spazi o punteggiature ma solamete lettere, underscore, trattini ed è case-sensitive.

Quindi, se una delle righe del nostro CSS fosse questa:

/* gradazione di blu basilare */ 
h1 { color: #2244aa; } 

in SASS scriveremo:

$primary-color : #2244aa;

/* gradazione di blu basilare */ 
h1 { color: $primary-color; } 

In sintesi, stiamo dicendo che in questo la variabile $primary-color per noi sarà uguale a #2244aa... e sarà così ogni volta che scriveremo $primary-color!

Con questo breve esempio forse non è ben visibile il vantaggio di questo passaggio. Ma prova ad esaminare il codice qui sotto:

/* gradazione di blu basilare */ 
h1 { color: #2244aa; } 

/* gradazione di blu basilare, applicata a uno sfondo */ 
a:hover { background: #2244aa; } 

/* gradazione di blu più chiara */
#header button { background-color: #2244aa; } 

/* gradazione di blu più scura */ 
#footer a { color: #2244aa; } 

/* gradazione di blu basilare convertita in RGBA */ 
#gallery .box { background-color: #2244aa; } 

in SASS sarà:

$primary-color : #2244aa;

/* gradazione di blu basilare */ 
h1 { color: $primary-color; } 

/* gradazione di blu basilare, applicata a uno sfondo */ 
a:hover { background: $primary-color; } 

/* gradazione di blu più chiara */
#header button { background-color: $primary-color; } 

/* gradazione di blu più scura */ 
#footer a { color: $primary-color; } 

/* gradazione di blu basilare convertita in RGBA */ 
#gallery .box { background-color: $primary-color; } 

In sostanza, ho ripetuto la variabile del colore tutte le volte che mi serviva e cambiando il colore descritto nella prima riga, gli altri verranno interpretati automaticamente con il nuovo colore.

Andiamo avanti.

Ti sei reso conto che qualcosa non torna?
Solitamente non ho un solo blu nel mio sito, ma una palette di gradazioni della stessa tinta blu che mi servono in differenti posizioni.
Devo creare una variabile differente per ogni gradazione?

Certo che no, è tutto più semplice!
Rileggi il codice qui sotto. E' simile al precedente, ma ho fatto una piccola aggiunta.

$primary-color : #2244aa;

/* gradazione di blu basilare */ 
h1 { color: $primary-color; } 

/* gradazione di blu basilare, applicata a uno sfondo */ 
a:hover { background: $primary-color; } 

/* gradazione di blu più chiara */
#header button { background-color: scale-color( $primary-color, $lightness:20% ); } 

/* gradazione di blu più scura */ 
#footer a { color: scale-color( $primary-color, $lightness:-20% ); } 

/* gradazione di blu basilare convertita in RGBA */ 
#gallery .box { background-color: scale-color( $primary-color, $alpha:-50% ); } 


Vedi? C'è uno strano scale-color in mezzo al codice.

Vediamo cos'è.

Per creare delle gradazioni più chiare, scure o trasparenti dello stesso colore ho usato una funzione chiamata scale-color.

Una funzione non è altro che un comando che decido di dare a un codice.

Con il comando scale-color, dico SASS di prendere il mio $primary-color e applicargli una trasformazione... un po' come fosse un filtro di Photoshop.


Le funzioni hanno una loro sintassi precisa che non va sbagliata o il codice non funzionerà!

Genericamente, una funzione si scrive così:

nome-della-funzione( parametri );

Ogni funzione ha un suo certo numero di parametri per... funzionare.

E' come se la funzione fosse una ricetta e i parametri fossero gli ingredienti.

Se per esmpio avessimo una funzione che si occupa di fare una torta, avremo:

fai-una-torta( farina-00 , uova, cioccolato, forno:180gradi );

oppure

fai-una-torta( farina-integrale , uova, vaniglia, forno:200gradi );

Il risultato delle de funzioni non è esattamente uguale, una torta sarà al cioccolato e una alla vaniglia.. ma sempre di torta si tratta!
La funzione verserà, mescolerà, e infornerà nel medesimo modo a prescindere dai parametri.


Torniamo ai nostri colori e esaminiamo il codice:

scale-color( $primary-color, $lightness:20% );

La funzione scale-color ha due parametri. Il primo è il colore, il secondo la trasformazione desiderata.
Quindi, scale-color modella il colore $primary-color, qualsiasi esso sia, e lo rende più luminoso del 20%.

Con scale-color possiamo comandare queste caratteristiche:

  • LA SATURAZIONE - $saturation
  • LA LUMINOSITA' - $lightness
  • LA TRASPARENZA (detto canale alpha) - $alpha
  • I CANALI - $red, $green, $blue

Se vogliamo che il nostro blu sia trasparente al 50% (o per meglio dire -50% di opacità) dobbiamo scrivere:

scale-color( $primary-color, $alpha:-50% )

Il colore risultante dalla compilazione dell'SCSS in CSS sarà per l'appunto rgba(34, 68, 170, 0.5), ossia il nostro $primary-color, (che avevamo impostato a #2244aa all'inizio, ricordi?), magicamente trasformato da SASS in un colore RGBA con l'alpha allo 0.5 .

Man mano che impari a governare scale-color puoi anche concatenare più parametri di trasformazione di un colore...

scale-color( $primary-color, $lightness:30%, $alpha:-40%  );

...o usare altre funzioni di trasformazione di colore, come mix che miscela due colori, o adjust-hue che calibra il tono.. e mille altre. Se sei curioso, ti rimando alla documentazione ufficiale.

Tutto chiaro?
 

Torniamo alla "storiella" descritta all'inizio.

Supponiamo che il codice da 3000 righe su cui stiamo alacremente lavorando sia stato creato tutto in SCSS, con la variabile $primary-color diligentemente inserita in tutti i punti in cui ci è utile.

Per fare contento boss e Cliente trasformando il colore principale da blu a verde, ci basterà cambiare questa riga:

/* BLU */
$primary-color : #2244aa;

con questa:

/* VERDE */
$primary-color : #448800;

Semplice, eh?

Che ne dici?



Rimani sempre informato sulle ultime novità!

Lavori in corso Ricevi aggiornamenti su Twitter o tramite il form. Il prossimo episodio uscirà il prossimo mese!