- Learn
- Guida SASS
- Tipi di variabili in SASS
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:
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
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
MVP e lean startup
Come applicare la metodologia lean startup con strumenti Open Source e sfruttando Microsoft Azure producendo un Minimum Viable Product (MVP) […]