Tipi di variabili in SASS

23 novembre 2015

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 variabileDescrizione
numeroes: 1, 2, 3 ma anche 10px o 2em
stringa di testoes: ‘hello’, “goodbye” ma anche senza apici quando non collide con altri tipi di variabili
colorees: red, blue, oppure #FF00A2 o rgba(10,0,230,0.5), da notare l’assenza degli apici
booleantrue o false
valore nullonull
lista di valoriseparati dallo spazio o dalla virgola (es: 10px 2px 3px oppure Helvetica, Arial, sans-serif)
mappa chiave valorees: (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:

FunzioneDescrizione
nthPer accedere a specifici elementi della lista
appendPer aggiungere nuovi elementi
joinPer 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:

FunzioneDescrizione
map-getPer recuperare un valore dalla mappa
mergeper 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

Tutte le lezioni

1 ... 4 5 6 ... 18

Se vuoi aggiornamenti su Tipi di variabili in SASS inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Tipi di variabili in SASS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy