Non è un segreto, negli ultimi tempi mi sto avvicinando molto nello sviluppo dei CSS tramite Sass e posso soltanto dire che questo ha velocizzato incredibilmente il mio lavoro!
Oggi affronteremo un argomento molto interessante e un po’ avanzato, se non ti senti pronto ricordati che c’è un corso interamente dedicato a questo linguaggio che ti aiuterà a muovere i primi passi!
All’interno del corso che ti ho appena collegato troverai molte informazioni utili su come iniziare a sviluppare i tuoi CSS con questa nuova sintassi (e potenzialità), tra queste troverai anche la descrizione delle variabili che, come in altri linguaggi, altro non sono che delle strutture che permettono di salvare un valore assegnandogli un nome più umano e facilmente riconoscibile.
[clickToTweet tweet=”Con le variabili organizzo meglio il mio codice #CSS e grazie alla maps in #Sass vado oltre!” quote=”Con le variabili organizzo meglio il mio codice #CSS e grazie alla maps in #Sass vado oltre!”]
Nonostante questo Sass ha iniziato a implementare anche le liste.
Le liste non sono altro che la soluzione implementata per avere un array monodimensionale, caratteristica di base di molti altri linguaggi di programmazione e molto utile per salvare un gran numero di informazioni all’interno di una singola variabile. Non approfondiremo troppo questo concetto perché ti presenterò qualcosa di ancora più interessante e avanzato che potrai utilizzare per creare i tuoi progetti.
Ecco la sua sintassi:
$lista-spazio: "valore1" "valore2" "valore3"; $lista-virgola: "valore1", "valore2", "valore3";
Come si può notare, le liste sono molto utili, sopratutto con cicli come @each che ci permettono di ciclare questi valori senza conoscere la quantità di elementi in esso contenuti. Purtroppo il limite più grande di una soluzione di questo tipo è la possibilità di contenere soltanto valori.
Questo vuol dire che usando le liste non sarai in grado di utilizzare l’assegnazione chiave : valore tanto utile negli array multidimensionali.
Se non conosci gli array multidimensionali prova a immaginarlo come a una “variabile in grado di contenere altre variabili che richiamano valori”. Riconosco che così d’impatto possa sembrare più complicato di una semplice lista, ma in molti casi questa soluzione è utile agli sviluppatori. Se sei curioso di scoprire come, continua a leggere questo articolo.
Le Data Maps invece sono degli elementi molto amati dagli sviluppatori Sass e non sarà raro trovarli all’interno di progetti come Susy, potentissima libreria dedicata allo sviluppo delle griglie CSS.
Cerchiamo quindi di conoscere da vicino questi nuovi strumenti e utilizzarli all’interno dei nostri progetti.
Che cosa è una Data Maps
Come ci suggerisce il nome, le Data Maps non sono altro che una mappa di dati che possiamo facilmente richiamare, ma per gli sviluppatori in ascolto posso ulteriormente semplificare questa definizione dicendo che sono la rappresentazione di un array multidimensionale, in Sass.
Prima di vedere un esempio pratico di questi elementi, scopriamone la sintassi:
$mappa: ( chiave1: val1, chiave2: val2, chiave3: val3 );
Come puoi notare, quello che facciamo è dichiarare la variabile $mappa (ma quanta fantasia 😉 ) e al suo interno salviamo una serie di valori che potranno essere richiamati attraverso la propria chiave.
A breve ti mostrerò quanto sia semplice da utilizzare questa struttura, ma prima scopriamo cosa realizzeremo assieme.
Come usare le Data Maps
Nell’esempio di quest’oggi ho deciso di realizzare qualcosa di semplice, creeremo una struttura HTML che contiene una serie di link a profili sociali. Per ciascuno di questi voglio impostare un effetto hover che mi permetta di modificarne il colore di sfondo. Praticamente qualcosa come la seguente GIF.
Niente di speciale quindi, quello che richiede questo semplice progetto è creare una classe per ogni elemento. Purtroppo la cosa non è molto scalabile perché se da quattro elementi dovremmo crearne decine il tuo lavoro sarebbe una costante ripetizione. E questo va contro uno dei principi fondamentali dello sviluppatore moderno.
Grazie alle Data Maps tutto questo sarà soltanto un brutto ricordo!
Iniziamo conoscendo la struttura HTML che useremo per realizzare questo effetto:
<ul> <li><a href="#" class="profile-link--facebook profile-link">Facebook</a></li> <li><a href="#" class="profile-link--google profile-link">Google+</a></li> <li><a href="#" class="profile-link--twitter profile-link">Twitter</a></li> <li><a href="#" class="profile-link--pinterest profile-link">Pinterest</a></li> </ul>
La struttura che usiamo in questo esempio è molto semplice. Non è altro che una lista non ordinata contenente una serie di link personalizzati da diverse classi. La struttura di queste classi è stata inserita prendendo spunto dal concetto BEM, un’utile tecnica per organizzare il proprio codice.
Senza perderci troppo in tecnicismi, andiamo a vedere le impostazioni base che ci permettono di creare questi pulsanti:
ul {
font-family: Helvetica, sans-serif;
list-style: none;
margin: 0 auto;
padding: 0;
width: 20em;
li {
margin-bottom: 0.5em;
}
}
.profile-link {
background: #f2f2f2;
border-radius: 3px;
color: #4778b8;
display: block;
padding: 0.75em 1em;
text-decoration: none;
&:hover {
color: #fff;
}
}Niente di strano quindi, in pieno stile CSS abbiamo aggiunto qualche regola di base che ci permette di trasformare una semplice lista di elementi in qualcosa di graficamente più carino:
Arriviamo però al momento di comprendere come potranno esserti utili la Data Maps.
La prima cosa che bisogna fare è dichiarare la mappa inserendo al suo interno il colore di sfondo che desideriamo utilizzare per i singoli link.
//Dichiaro la Data Map $profili: ( facebook: #3b5998, google: #dd4b39, twitter: #00aced, pinterest: #cb2027 );
Niente di complicato, vero? Ho semplicemente creato una variabile $profili al cui interno sono stati salvati i nomi dei social network (usati come chiavi) e i colori di sfondo (usati come valori) da applicare ai nostri link. A questo punto non resta altro che usare la mappa e per farlo non esiste cosa più semplice che utilizzare il ciclo @each:
//Uso la Data Map con @each
@each $profilo, $bg-color in $profili{
.profile-link--#{$profilo}:hover{
background-color: $bg-color;
}
}Il funzionamento di @each è molto semplice e se lo confronti con il foreach di linguaggi come il PHP troverai il suo funzionamento molto simile, bisogna tenere a mente che la sintassi di @each lavora al contrario. A differenza del ciclo foreach in cui passiamo come primo parametro la variabile contenente l’array e successivamente specifichiamo i nomi delle variabili che conterranno la chiave e il valore, con @each facciamo l’opposto.
Prima dichiariamo le variabili per le chiavi e i valori, successivamente specifichiamo la mappa dal quale verranno presi questi valori, nel nostro caso $profili.
Interpolazione, un’interessante tecnica per creare selettori
Apro questa sezione perché ritengo doveroso documentare l’uso di una particolare tecnica offerta da Sass, così come da altri linguaggi di programmazione, sto parlando dell’interpolazione.
In questo esempio specifico, grazie a questa caratteristica possiamo prendere il valore contenuto all’interno di una variabile e utilizzarlo per generare dinamicamente il selettore di una regola CSS. Osserva attentamente l’esempio precedente, hai notato niente di strano nella sua sintassi?
Se non lo hai visto, sono convinto che con un pizzico di attenzione in più troverai che #{$profilo} sembra un uso molto interessante per la creazione di un selettore.
Questo vuol dire che a ogni ciclo di @each il selettore verrà creato dinamicamente e utilizzerà il valore di $profilo per creare il tuo selettore, ecco il codice CSS che verrà generato:
.profile-link--facebook:hover {
background-color: #3b5998;
}
.profile-link--google:hover {
background-color: #dd4b39;
}
.profile-link--twitter:hover {
background-color: #00aced;
}
.profile-link--pinterest:hover {
background-color: #cb2027;
}Comprendo che probabilmente sarai rimasto un po’ deluso dal fatto che tutto questo è servito ad automatizzare la generazione di quattro semplici regole CSS ma ci sono un paio di punti sui quali vorrei farti riflettere:
- il codice generato dipende dal numero di valori inseriti all’interno della mappa, questo significa che se al posto di avere 4 valori tu ne avessi avuti 20 (o 100) ti saresti risparmiato la fatica di dover scrivere altrettante regole CSS;
- oltre a questo scoprirai come altri sviluppatori Sass utilizzano questa struttura per fornirti delle configurazioni incredibilmente semplici, infatti molto spesso basta impostare un numero irrisorio di valori per avere un sistema a griglia completamente funzionante.
Prima di concludere, se sei curioso di vedere l’esempio funzionante ecco qua sotto il Pen realizzato con il codice presente in questo articolo.
Conclusioni
Spero che questo articolo ti sia stato utile per scoprire un nuovo aspetto di Sass. Ti confesso che ho iniziato a utilizzare le Data Map perché me le sono ritrovate di fronte utilizzando alcune librerie Sass, ma devo dire che le trovo incredibilmente utili!
Quando ci troviamo a creare Data Maps per i nostri progetti, la cosa della quale bisogna stare più attenti è come vengono nominate le classi e le strutture utilizzate, per il resto c’è Sass che fa tutto il resto.
Se desideri approfondire le conoscenze Sass e migliorare il tuo lavoro puoi iniziare consultando questa lezione gratuita.
Lascia un commento