SASS (o meglio SassScript) è un linguaggio tipizzato dinamicamente, questo significa che ogni variabile viene assegnata, sulla base del suo valore, ad una di queste categorie:

Tipo di variabile Descrizione
numero es: 1, 2, 3 ma anche 10px o 2em
stringa di testo es: ‘hello’, “goodbye” ma anche senza apici quando non collide con altri tipi di variabili
colore es: red, blue, oppure #FF00A2 o rgba(10,0,230,0.5), da notare l’assenza degli apici
boolean true o false
valore nullo null
lista di valori separati dallo spazio o dalla virgola (es: 10px 2px 3px oppure Helvetica, Arial, sans-serif)
mappa chiave valore es: (nome: Sandro, cognome: Paganotti)

Ad esempio, sulla base di queste nuove informazioni possiamo dedurre che l’argomento passato attraverso l’invocazione:


@include baseButton(red)

è sicuramente di tipo colore.

SASS, stringhe e interpolazione di stringhe

In CSS sono ammessi due tipi di stringhe: con virgolette (sia singole che doppie) e senza virgolette. Un esempio ci è offerto della proprietà font-family, il cui valore va indicato tra virgolette quando il nome del font si compone di due parole, come nel seguente codice:


p {
	font-family: "Times New Roman", Georgia, Serif;
}

Entrambi i tipi di stringhe sono validi in SassScript, che genera nel codice compilato lo stesso tipo di stringa utilizzato nello script, con l’unica eccezione dell’interpolazione.

L’interpolazione è una funzionalità di SassScript che permette di utilizzare variabili per generare dinamicamente nomi di selettori e di proprietà. La sintassi dell’interpolazione prevede un carattere cancelletto (hash) seguito da parentesi graffe:


#{}

Vediamo un esempio:


$large-screen: 1280px;
$large: "only screen and (max-width: #{$large-screen})";
@media #{$large}{ ... }

Il codice compilato sarà il seguente:


@media only screen and (max-width: 1280px) { ... }

Abbiamo utilizzato due diversi tipi di stringhe. Nel primo caso (1280px), non sono state utilizzate virgolette; nel secondo caso sì. In entrambi i casi, SassScript genera stringhe senza virgolette.

Liste

In Sass le liste sono serie di valori separati da virgole o spazi. Le liste possono essere manipolate tramite specifiche funzioni, come:

Funzione Descrizione
nth Per accedere a specifici elementi della lista
append Per aggiungere nuovi elementi
join Per unire liste

Oltre che da semplici elementi, le liste possono essere composte da altre liste, come nei due esempi che seguono:


1.2em 1.6em, 13px 15px
(1.2em 1.6em) (13px 15px)

Nel primo caso, gli elementi della lista esterna sono separati da virgola, mentre le liste interne da spazi; nel secondo caso, sia la lista esterna che la lista interna sono separate da spazi, e per questo gli elementi delle liste interne vengono racchiusi tra parentesi.

Mappe

Le mappe, invece, sono coppie chiave: valore, dove le chiavi sono utilizzate per individuare i valori corrispondenti. Le mappe assumono la seguente forma generale:


$map: (k1: v1, k2: v2, k3: v3);

Le coppie di una mappa devono sempre essere racchiuse tra parentesi e separate da virgole. Ad ogni chiave può corrispondere un solo valore, sebbene questo possa essere un qualunque oggetto SassScript. Lo stesso valore, invece, può essere assegnato a più chiavi.

Anche le mappe possono essere manipolate da funzioni SassScript per gestire le mappe, ad esempio:

Funzione Descrizione
map-get Per recuperare un valore dalla mappa
merge per unire due mappe

Come ci ricorda anche il sito ufficiale, le mappe sono immutabili, ciò significa che ogni funzione che manipola una mappa, genera una nuova mappa e non aggiorna la mappa esistente.

Le chiavi di una mappa possono essere costituite da un qualunque tipo di dato SassScript, come anche da un’espressione, una lista o un’altra mappa.

I colori

In SassScript anche i colori costituiscono un tipo di dato, rappresentato da qualsiasi espressione CSS che rappresenti un colore. Sass converte quest’espressione nella forma più compatta di rappresentazione del colore, ad esempio, se l’espressione è #0000FF, Sass convertirà l’annotazione esadecimale nel nome colore blue.

SassScript dispone anche di numerosi COLOR_NAMES, che possono essere utilizzati in fase di scripting.

La documentazione sui colori avverte di indicare i nomi dei colori sempre tra virgolette, quando devono essere utilizzati nella costruzione di nomi di selettori, altrimenti potrebbero essere generati errori nell’interpolazione del nome.

Riferimenti
6 / 18

Esempi con @mixin

I Video di HTML.it