Usi Intelligenti delle Maps in Sass

Se questo non è il primo articolo che leggi su SkillsAndMore, sai già che a noi Sass è un preprocessore che ci piace moltissimo. Cavoli, abbiamo anche creato un corso dedicato al suo utilizzo. Corso che a breve vedrà anche l’aggiunta di nuove lezioni 😉

Recentemente abbiamo parlato delle Data Maps e ti ho mostrato come sia un elemento semplice da ciclare per utilizzare la sua struttura con un @each per permetterci di risparmiare un sacco di codice che altrimenti avresti dovuto scrivere tu.

Però come ogni bravo sviluppatore, anche io vado in giro testando e cercando nuove idee che mi permettono di applicare in modi più intelligenti tecniche che già conosco. Per questo motivo ho voluto pubblicare questo articolo, per aiutarti a mantenerti al passo con i tempi e sfruttare le Data Maps per creare strutture utili che ti permetteranno di salvare un sacco di tempo.

Oggi conosceremo alcune funzioni utili che ci permetteranno di muoverci meglio all’interno delle Data  Maps come map-get() o map-has-key().

Se non hai già letto l’articolo precedente, ti consiglio di farlo adesso perché gli esempi che seguiranno suppongono la conoscenza dell’argomento; al tempo stesso sento la necessità di togliermi un sassolino dalla scarpa e mettere in chiaro un concetto molto importante.

Data Maps VS sourcemaps

Come successo anche nel precedente articolo sento il dovere di tracciare una linea sulla sabbia che ti permetterà di non confonderti con questi termini. Le feature che prendono il nome Data Maps e sourcemap sono state introdotte nella versione 3.3  di Sass e molto spesso hanno confuso diversi sviluppatori per il nome simile, ma le funzionalità che presentano sono completamente diverse.

Le Data Maps (d’ora in poi maps) sono una sintassi che ci permette di organizzare al meglio il codice mentre le sourcemap sono dei file .map generati automaticamente dal nostro sistema che ci aiutano nel debug delle nostre applicazioni collegando il CSS generato (spesso minificato) con il file Sass stesso mostrando le porzioni di codice utilizzate direttamente all’interno degli strumenti per sviluppatori dei nostri browser.

In questo articolo parleremo delle prime, le maps, perché permettono di raggiungere risultati incredibilmente interessanti e tralasceremo le seconde purché sempre interessanti.

Il motivo base per il quale una maps permette di organizzare meglio il nostro codice è la possibilità di inserire diversi valori all’interno di un unica variabile, ma queste sono tutte cose che ormai dovresti sapere dato che le abbiamo già affrontate all’interno del precedente articolo.

Che ne dici se andiamo a scoprire qualcosa di nuovo?

Controlli avanzati

A questo punto conosci le maps e sai come funzionano, giusto per essere sicuri che tu ti ricordi di cosa stiamo parlando eccoti un piccolo esempio:

$mappa: ( 
	chiave1: valore1, 
	chiave2: valore2, 
	chiave3: valore3 
)

Hai già visto questa sintassi quindi non voglio andare nel dettaglio, soltanto che nello scorso articolo abbiamo visto come poter utilizzare le mappe soltanto all’interno del ciclo @each e devo ammettere che questo non mi è sembrato il modo più corretto per presentarti le funzionalità delle Data Maps perché in fin dei conti abbiamo lasciato che fosse questo ciclo l’incaricato a prendere i valori contenuti.

La cosa da sapere è che con Sass hai molti strumenti a tua disposizione che ti permettono sia di conoscere il valore, sia di svolgere molte operazione con questi elementi.

Come accedere ad un valore

Abbiamo detto che le mappe sono incredibilmente comode perché, un po’ come gli array, sono in grado di contenere un gran numero di valori all’interno di un’unica variabile. Il fatto è che una volta inseriti questi valori dobbiamo essere in grado di estrarli.

Per fare questo esiste una funzione che prende il nome di map-get() ed è veramente semplice da usare, ecco un esempio basato sulla mappa che abbiamo creato precedentemente:

.ele:before { 
	content: map-get($mappa, chiave2); 
}

Praticamente quello che stiamo facendo è dire a Sass che vogliamo ottenere il valore all’interno di chiave2 contenuto nella mappa di nome $mappa (quanta fantasia in queste parole 😉 ).

Una volta che avremo compilato il nostro CSS il codice generato sarà il seguente:

.ele:before { 
	content: valore2; 
}

Riconosco che questo esempio è forse troppo semplice, ma mi ha permesso di presentarti questa funzione velocemente senza andare a scomodare concetti troppo complessi. A questo punto sai che ogni volta che dovrai prendere un valore all’interno di una mappa dovrai dichiarare il nome della mappa stessa e la chiave utilizzata per salvare il valore come parametri di map-get().

Controllare la presenza di una chiave

Dato che sempre più spesso creiamo dei progetti con dei collaboratori, può capitare la necessità di controllare la presenza di una determinata chiave. Per fare questo puoi utilizzare tranquillamente la funzione map-has-key() che svolge proprio questo compito.

[clickToTweet tweet=”La funzione map-has-key() è molto comoda in #Sass per scoprire se la #DataMaps ha una chiave.” quote=”La funzione map-has-key() è molto comoda in #Sass per scoprire se la #DataMaps ha una chiave.”]

Essendo una funzione di controllo questa non farà altro che restituirci un valore booleano indicando la presenza o meno di una chiave all’interno della maps, per gestire questa condizione dobbiamo utilizzare @if e @else in modo da poter rendere partecipe il nostro codice di quanto sta succedendo.

.ele:before { 
	@if map-has-key($mappa, chiave2){ 
		content: "Trovata chiave cercata."; 
	} @else { 
		content: "Non trovo la chiave cercata." 
	} 
}

Proprio come avresti fatto in PHP o JavaScript puoi controllare il risultato booleano con un ciclo if e lasciare che sia il computer a prendere una decisione al posto tuo. Una volta eseguito questo codice ecco quello che troverai all’interno del tuo CSS:

.ele:before { 
	content: "Trovata chiave cercata."; 
}

Ti ho presentato questa funzione perché per il buon funzionamento di questi elementi è necessario assicurarsi di non scatenare degli errori, altrimenti il CSS non verrà neanche generato.

Altre funzioni interessanti

Se vai a controllare la documentazione di Sass a riguardo potrai trovare moltissime funzioni utili che potrebbero interessarti. In questa sezione ho voluto elencarti quelle che ho ritenuto più utili, ti lascio approfondire questi aspetti da solo perché gli scopi di questo articolo sono ben diversi 😉

Ad esempio, se non ti ricordi quali sono le chiavi che hai utilizzato all’interno di una maps puoi ottenerne una lista usando map-keys($mappa) e la stessa cosa funziona per i valori che potrai elencare con map-values($mappa); la cosa che ti devi ricordare di fare è sostituire $mappa con il nome della mappa che stai utilizzando.

Esiste anche la possibilità di unire due mappe grazie alla funzione map-merge($mappa1, $mappa2), ma adesso è giunto veramente il momento di scoprire qualche modo di usare queste maps.

Casi d’uso per le Maps Sass

Siamo giunti alla presentazione vera e propria dei singoli casi d’uso che ci consentiranno di scoprire come utilizzare le maps all’interno dei progetti da realizzare.

Livelli Photoshop

Chiariamo che non hai bisogno di conoscere Photoshop, ma ho utilizzato il nome di questa applicazione per richiamarti alla memoria come questa usa e gestisce i vari livelli.

Praticamente con questa applicazione è possibile gestire i singoli livelli spostandoli e sorvapponendoli come se fossero dei semplici fogli lucidi; quelli che venivano usati suoi proiettori a scuola per intenderci.

Per quanto questa possa sembrare una pratica dedicata al mondo grafico ti ricordo che all’interno dei CSS abbiamo la proprietà z-index che ci permette di fare praticamente la stessa cosa.

In questo blog non siamo mai entrati nel dettaglio , ma spero che tu sappia che grazie allo z-index è possibile spostare gli elementi della nostra pagina HTML lungo l’asse Z.

Visto che tutta la pagina web è rappresentata come un piano cartesiano, l’asse Z è l’asse perpendicolare al piano formato da X e Y. Grazie a questa caratteristica è possibile realizzare un gran numero di effetti come le finestre modali e i pulsanti di condivisione posizionati sopra le immagini.

$livelli: ( 
	modale: 100, 
	logo: 10, 
	header: 5, 
	footer: 5, 
	immagine: 2, 
	testo: 1 
);

La mappa appena creata ci permette di dare una gerarchia ai nostri elementi, ma dobbiamo sempre essere in grado di richiamare i valori assegnati e come abbiamo visto non sempre sembra un compito semplice. Per fortuna che all’interno di Sass abbiamo la possibilità di creare nuovi mixin che permettono di automatizzare diversi passaggi.

@mixin livello($nome-livello) {
  z-index: map-get($livello, $nome-livello);
};

Ecco costruito il mixin livello() che fornirà un semplice metodo per inserire la proprietà z-index al valore impostato come parametro. D’ora in avanti non devi far altro che utilizzarlo per impostare l’elemento selezionato allo z-index idoneo per rispettare la sua posizione.

Gestione colori

In qualsiasi progetto web che si rispetti, i colori vengono selezionati con cura e viene fornita una palette ben precisa. Con le variabili è già possibile ottenere delle semplificazioni interessanti visto che non dovremo ricordarci i valori esadecimali di quelli utilizzati, ma utilizzando le maps si possono ottenere risultati di tutt’altro livello, sopratutto se andiamo ad includere ulteriori mappe:

$colors: ( 
	'neutral': ( 
		white: #fff, 
		black: #000 
	), 
	'blu': ( 
		chiaro: #80a3ed, 
		base: #16419c, 
		scuro: #0b2252 
	), 
	'rosso': ( 
		chiaro: #f76a90, 
		base: #be0b3a, 
		scuro: #3d0313 
	) 
);

Se ti è capitato di lavorare in PHP, avrai notato che queste mappe sono molto simili a degli array associativi con i quali è possibile organizzare gruppi di informazioni, a dirla tutta ricordano anche il famoso formato JSON. Nell’esempio precedente ho inserito una palette di colori per un progetto che ho realizzato, tutto quello che resta da fare è creare una funzione che mi permetta di richiamare il colore giusto quando necessario.

@function color( $nome-colore, $tono: base ) { 
	@return map-get( map-get( $colors, $nome-colore ), $tono ); 
}

Ecco come creare la comoda funzione color() che ti permetterà di richiamare il colore desiderato all’interno di qualsiasi proprietà CSS. Prova a utilizzare questa tecnica per un paio di settimane, sono sicuro che diventerà presto parte del tuo workflow 😉

Media Query

Il mondo del web design si è rivoluzionato qualche anno fa quando ha compreso che Internet non era più una proprietà delle applicazioni desktop, se voleva sopravvivere doveva imparare ad adattarsi ai diversi dispositivi che nascevano nel mercato mobile. Oggi si pensa che la parola responsive sia una feature di alto livello mentre dovrebbe essere la base di qualsiasi progetto web.

Noi abbiamo deciso di aiutarti rendendo gratuita questa lezione sulle media query ma le conoscenze necessarie a padroneggiare siti web responsive sono molte altre.

Capita spesso che nel nostro codice i cambiamenti del sito siano dovuti a modifiche fatte nel layout e impostare le nostre media query con nomi come 2-col, 8-push o wrapper non sono scelte poi così intelligenti, perché in fin dei conti non ci spiegano come viene modificato il nostro layout.

Magari ad un certo punto viene aggiunta la sidebar, il menu di navigazione si trasforma oppure l’header stesso assume dimensioni diverse; ed ecco trovati i cambiamenti del nostro layout che se usati come chiavi riescono a rendere in pieno tutta la loro utilità.

$breakpoints: ( 
	sidebar-on: 680px, 
	wide-header: 900px 
);

Con nomi molto più descrittivi siamo in grado anche di creare due mixin che ci permetteranno di scoprire se il nostro schermo è più piccolo o più grande rispetto alle nostre chiavi.

$breakpoints: ( 
	sidebar-on: 680px, 
	wide-header: 900px 
);

//Se è più piccolo di un breakpoint 
@mixin smaller-than( $point-name ) { 
	$width: map-get( $breakpoints, $point-name ); 

	@media (max-width: $width) { @content; } 
} 

//Se è più grande di un breakpoint 
@mixin larger-than( $point-name ) { 
	$width: map-get( $breakpoints, $point-name ); 
	@media (min-width: $width) { @content; } 
}

Conclusioni

Ovviamente esistono altre applicazioni interessanti delle maps ma spero che con questi esempi pratici tu ti sia incuriosito e abbia deciso di lavorare maggiormente con questi tipi di dati, il tuo codice ne potrà beneficiare moltissimo.

Che ne pensi delle maps? Credi che le userai?

Io ormai le ho implementate da diverso tempo e ho trovato molto comoda la loro presenza all’interno del mio workflow. Ma se hai qualcosa di meglio, aggiungi pure nei commenti perché sono proprio curioso 😀