Tipi di variabili in SASS

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:

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:

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:

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

• Sass Reference
• SassScript Reference
• Interpolazione
• funzioni SassScript per gestire le liste
• funzioni SassScript per gestire le mappe