Finite le introduzioni con la scorsa lezione oggi è giunto il momento di iniziare a trattare gli argomenti più divertenti. Con questa verrai a conoscenza di due interessanti caratteristiche di Sass: Nesting e i Selettori.
Se ti stai approcciando a questa lezione con il pensiero fisso “Che paxxe, io conosco già i selettori CSS!” ti chiedo di ammazzare immediatamente questa idea. Questo perché all’interno di Sass anche i selettori hanno avuto un notevole miglioramento che punta soltanto a velocizzare e semplificare il tuo lavoro.
Cerchiamo intanto di capire che cosa si nasconde dietro al termine Nesting. Questa parola, che tradotta direttamente dall’inglese significa annidamento (un termine orribile da utilizzare in Italiano) è una funzionalità molto utile da conoscere perché, grazie a questa tecnica, potrai risparmiarti la fatica di scrivere centinaia di inutili caratteri!
Come dovesti sapere molto bene, esistono diversi tipi di selettori nel linguaggio CSS, esistono selettori elemento, identificatori, classi e una miriade altri utili selettori (come ad esempio le stesse pseudo-classi :nth-child) che ti permettono di andare a selezionare precisamente gli elementi che desideri modificare.
/* Selettore Elemento Paragrafo */
p{}
/* Selettore con Identificatore */
#id{}
/* Selettore Classe */
.class{}
/* Selettore Pseudo-Classe */
p:nth-child(even){}
/* Selettore Pseudo-Classe */
a:hover{} Oltre a tutti questi selettori che puoi usare con i CSS è anche possibile concatenare più elementi tra loro e questo ti permette di muoverti più dinamicamente all’interno del DOM. Fin troppo spesso capita però di dover ripetere più e più volte il nome di un elemento radice che permette di personalizzare l’intera gamma di elementi contenuti all’interno.
#box{
background-color: red;
}
#box header{
background-color: yellow;
}
#box header h1{
color: black;
}
#box section h1{
color: blue;
}Come puoi vedere dal codice di esempio, che probabilmente non è neanche troppo differente dal tuo, in questo foglio di stile sono state inserite 4 regole differenti ma ho dovuto ripetere il selettore #box e header più volte; cosa che mi ha forzato a scrivere ben 22 inutili caratteri (spazi inclusi).
Capisco che da questo piccolo esempio 22 caratteri possono non sembrare tutto questo problema ma se pensi che in questo esempio ci sono soltanto 4 selettori CSS, mentre in un normalissimo progetto puoi trovarne diverse centinaia, adesso dovresti essere in grado di guardare con occhi diversi la situazione.
Osserva intanto come Sass gestisce questa situazione e poi valuta tu stesso se lo ritieni un utilizzo migliore dei selettori CSS:
#box{
background-color: red;
header{
background-color: yellow;
h1{ color: black; }
}
section h1{ color: blue; }
}Personalmente ritengo che questa struttura sia veramente più utile per diversi motivi. Per prima cosa mi permette di conoscere l’elemento radice in modo molto semplice (che in questo caso è #box) successivamente, un po’ come facciamo per le funzioni in PHP, è possibile specificare al suo interno i selettori degli elementi contenuti al suo interno.
Da quando ho scoperto questa funzionalità ne sono diventato letteralmente dipendente, talvolta mi capita di scrivere questa struttura anche all’interno di file CSS (cosa che ovviamente mi fa sballare tutto il progetto 😉 ), la possibilità di organizzare il mio codice attraverso l’indentazione (o annidamento) mi permette di leggere più velocemente il mio codice risparmiando comunque molti caratteri.
Ma il Nesting non ha portato soltanto la possibilità di includere proprietà CSS all’interno di altre ma ci fornisce anche un carattere molto particolare che farà riferimento all’elemento contenitore. Sembra una funzionalità un po’ inutile detta così non è vero? Invece risulta essere una di quelle funzionalità incredibilmente utili quando usi pseudo-elementi e pseudo-classi all’interno del tuo codice CSS.
Osserva questo piccolo esempio:
a{
color: blue;
&:hover{ color: red; }
}
li{
color: black;
background-color: #999;
&:nth-child(even){
background-color: #aaa;
}
}Come puoi notare tu stesso in questo piccolo esempio abbiamo utilizzato le due pseudo-classi :hover e :nth-child per creare, nel primo, un cambio di colore dei link nello stato hover e una lista di elementi con effetto zebra per quanto riguarda il secondo.
Utilizzando il selettore & non facciamo altro che dire a Sass che vogliamo fare riferimento al selettore che direttamente include le nuove regole. Una volta compilato questo file il codice CSS risultante sarà simile a questo:
a{ color: blue; }
a:hover{ color: red; }
li{
color: black;
background-color: #999;
}
li:nth-child(even){ background-color: #aaa; }Prima di andare oltre, voglio mostrarti quanto potente sia questo nuovo selettore con questo semplice esempio:
.rosso{
a{ color: red; }
#special & a{ color: blue; }
}Come puoi notare tu stesso, quando si usa la & si va sempre a fare riferimento al selettore parente, anche quando questo viene preceduto da un altro selettore.
.rosso a{ color: red; }
#special .rosso a{ color: blue}In questo modo possiamo organizzare il nostro codice molto meglio e ci aiuterà a capire la sua logica anche quando torneremo a lavorare sul progetto dopo mesi.
Precedentemento ho detto che il codice CSS risulterà simile perché, ancora una volta, grazie a SASS abbiamo la possibilità di specificare come generare il proprio codice all’interno del foglio di stile, e con Prepros questo diventa un gioco da ragazzi!
In poche parole, non ha alcuna importanza l’organizzazione del codice che inseriamo all’interno del file .scss perché quando questo verrà compilato andrà a fare riferimento allo stile di scrittura che abbiamo impostato nelle opzioni del progetto.
Come puoi notare da questa piccola immagine il precompilatore Sass offre 4 tipi di output differente, di default è selezionata l’opzione Expanded che manterrà all’interno del tuo CSS tutti i commenti inseriti e manterrà l’ordine di scrittura il più esteso possibile. Questa opzione crea un foglio di stile molto semplice da leggere ma, dato che stiamo lavorando con Sass, la ritengo abbastanza inutile.
Con l’opzione Nested si ottiene un codice CSS leggermente più organizzato perché tenterà di riportare anche nel codice la struttura di annidamento che hai utilizzato all’interno del file .sass. Se hai bisogno di un esempio, la struttura generata è uguale a quella che ti ho mostrato mentre parlavamo delle pseudo-classi.
Compact e Compressed sono due tipi di output che ti permetteranno di ridurre in maniera incredibile il peso in kb dei tuoi CSS. Il primo crea un file dove ogni selettore, comprese le proprietà in esso contenute, occupano una singola linea, mentre il secondo offre il miglior compromesso in fatto di riduzione perché inserisce tutto il codice CSS distribuito su una singola riga di codice andando a rimuovere qualsiasi inutile carattere di spazio.
Attento alle trappole!
Come diceva sempre lo zio Ben a Peter Parker “Da grandi poteri derivano grandi responsabilità.” e benché non sia ancora possibile dondolare tra un edificio ed un altro con la sua eleganza, utilizzare il Nesting può portarci talvolta a compiere qualche errore.
Ho visto moltissime persone che, muovendo i primi passi all’interno di SASS, creano l’intera struttura HTML all’interno di questi file. Un piccolo esempio potrebbe essere:
body{
header{
div{
p{
a{ color: red; }
}
}
}
}Cerchiamo di capirci, dal punto di vista di SASS, noi non stiamo facendo niente di male. Da questo codice il suo compilatore comprende che stiamo annidando diversi selettori con lo scopo di selezionare un elemento ben preciso:
body header div p a{
color: red;
}L’errore che viene commesso è quello di utilizzare un numero inutile di selettori CSS! Come buona pratica, qualsiasi regola CSS non dovrebbe presentare più di 3 elementi (questo aiuta il browser a leggere le regole e a fare un rendering della pagina più veloce) ma il discorso principale è che non hai bisogno di tutti questi selettori.
Inserire tutte le regole all’interno di un unico elemento radice è un comportamento veramente sbagliato dato che, oltre alle difficoltà di rendering, andrà a creare un file .css incredibilmente più grande (dato che per ogni regola CSS dovrà inserire tutti i selettori presenti) e non credo proprio che sia qualcosa per la quale i visitatori del sito web ti ringrazieranno.
Quindi ricorda sempre che utilizzando SASS hai un grande potere e se usato nel modo sbagliato potresti incasinare incredibilmente il codice generato andando ad infrangere moltissime delle buone pratiche del web. Utilizza sempre i selettori necessari e valuta sempre se esiste un modo per rendere le cose più semplici.
Selettori
Ad inizio lezione, ho preso particolarmente a cuore l’importanza di non pensare a questa sezione come il classico ripasso sui selettori, se sei interessato a questo ti consiglio di andare a vedere questa mia guida CSS perché quello di cui ti voglio parlare è la possibilità di includere le regole CSS specificate per un elemento, all’interno di un altro.
Roba da fantascienza? Assolutamente no, tutto questo è possibile (ancora una volta) grazie a Sass.
Dato che questo concetto è molto astratto prendiamo in esame lo sviluppo di un elemento molto utile a tutti i siti web e che molto spesso trovi anche sulle pagine di html5AndMore: la creazione delle alert box.
Questi elementi sono molto utili all’interno di un sito web perché, proprio come nei libri, permettono di interrompere momentaneamente il flusso del testo per introdurre dei messaggi che completano le informazioni in esso contenute. Possono essere sviluppate tutte le alert box di cui hai bisogno ma ai fini di questa lezione andremo ad analizzarne soltanto tre tipi: informazione, successo ed errore.
Il codice HTML di base che possiamo utilizzare è tendenzialmente:
<div class="box info">Info</div> <div class="box success">Successo</div> <div class="box error">Errore</div>
Non c’è niente di sbagliato in questo codice ma stiamo andando ad inserire la classe box all’interno di ogni elemento e, alla lunga, questo va ad appesantire complessivamente la pagina HTML. Molto più diretto e semantico sarebbe utilizzare una struttura di questo tipo:
<div class="info">Info</div> <div class="success">Successo</div> <div class="error">Errore</div>
Ogni elemento HTML ha la sua classe ma questo comporta un piccolo problema: come fare per condividere gli stili base tra i vari elementi? Nell’esempio precedente si poteva specificare tutte le regole generali all’interno della classe box e lasciare che il browser leggesse le modifiche per ogni altra singola classe, ma con SASS puoi velocizzare ulteriormente questo processo e fare qualcosa di ancora più interessante.
.info{
border: 1px solid #000;
border-radius: 10px;
padding: 15px;
margin: 0 auto 10px;
}
.success{
@extend .info;
background-color: #96cb98;
border-color: green;
}
.error{
@extend .info;
background-color: #d89b91;
border-color: red;
}Con la parola chiave @extend stiamo dicendo a SASS che vogliamo che l’elemento selezionato erediti le regole che sono state impostate all’interno dell’elemento specificato con i selettori che seguono questa parola. Questo risulta veramente molto utile per diversi motivi, ma il principale è quello di mantenere un codice pulito.
Ogni volta che aprirai il tuo file .scss la parola chiave @extend ti ricorderà che questo elemento eredita determinate proprietà da un altro elemento e potrai fare le modifiche strutturali che desideri modificando soltanto quello principale (come ad esempio modificare il border-radius).
Ritengo questa funzionalità veramente molto importante e potrai vedere come la utilizzo con determinati esempi all’interno del video collegato a questa lezione. Ovviamente, come molte altre cose che vedrai in questo corso, conoscere questa funzionalità non significa saperla usare.
Tornando al nostro esempio: nella classe .info definiamo le proprietà di base per l’alert box; tutto quello che resta da fare, all’interno delle classi .success e .error, è modificare le proprietà che ci permettono di personalizzare i singoli elemento, come ad esempio i bordi e il colore di sfondo.
Et voilà: in un colpo solo, ci portiamo a casa tre ottimi alert box, risparmiando un bel po’ di righe di codice CSS!
Placeholder, questi sconosciuti
Abbiamo appena scoperto che Sass è un incredibile strumento che ci permette di estendere del codice già utilizzato per un elemento diverso, infatti grazie ad @extend siamo in grado di ampliare il classico concetto di classe mantenendo comunque il nostro codice semplice da utilizzare.
Le classi che abbiamo appena creato dovranno essere utilizzate nel codice HTML della pagina, questo potrebbe essere un problema se stiamo molto attenti alle dimensioni di questi documenti e se desideriamo mantenere il nostro codice il più semantico possibile.
In alcuni framework quella di aggiungere classi sembra la soluzione più semplice, personalmente ne sono sempre stato distante perché non voglio arricchire il mio codice con ulteriori classi; ed è per questo motivo che ho incontrato i placeholder di Sass.
Riprendendo l’esempio precedente, tutto il nostro codice fa riferimento alla classe .info e anche se non la usassimo, Sass compilerà comunque questa classe nel CSS generato. Capisco che può sembrare più una fissazione, ma ottimizzare il proprio codice ci permette di avere siti più performanti 😉
Utilizzando Sass avrai a disposizione degli strumenti che ti permettono di definire un blocco di codice che dovrà essere compilato soltanto se utilizzato all’interno delle tue strutture. Questa funzionalità funziona a stretto contatto con @extend e ci permette di creare delle strutture che non andranno ad appesantire il codice CSS.
Qua ti lascio la sua sintassi ma ti ricordo che all’interno del video ti mostro qualche esempio per approfondire la funzionalità di questo particolare comando.
%stili{
color: #fff;
background-color: #000;
font-family: Helvetica, Arial, sans-serif;
}
.classe_1{
@extend %stili;
}Ecco mostrato che utilizzando un placeholder con `@extend` quest’ultimo non include il selettore contenente il codice che stiamo estendendo (al contrario degli esempi precedenti).
.classe_1{
color: #fff;
background-color: #000;
font-family: Helvetica, Arial, sans-serif;
}Conclusioni
Queste due piccole feature già da sole valgono la pena per giustificare l’avvicinamento a Sass, nelle prossime lezioni scoprirai quali altre funzionalità, comprese quelle di Compass, che possono essere utilizzate per velocizzare il tuo sviluppo CSS.
Ok ormai è chiaro, io sono più che contento nell’utilizzare questo linguaggio ma non sono l’unico che la pensa in questo modo. Nella realtà Open Source (WordPress e BootStrap in primis) hanno iniziato a supportare Sass e ad utilizzarlo nei propri progetti.
Oltre a questo volevo sapere se tu utilizzi già Sass, se hai sviluppato qualcosa (come un’estensione, una libreria di mixin o qualsiasi altra cosa) oppure soltanto se pensi che non sia utile utlizzare questo linguaggio, fatti avanti!
Siamo sempre affamati di conoscere nuovi punti di vista e non siamo affatto cattivi nelle risposte 😉