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.