La definizione dello stile di un selettore può essere effettuata fondamentalmente con due approcci:
- il primo consiste nel definire proprietà da assegnare a tutti gli elementi della pagina identificati dal selettore;
- il secondo metodo si basa sull'idea che lo stile del selettore sia vincolato agli elementi che lo contengono.
Il secondo approccio è sicuramente preferibile perché permette di scrivere codice leggibile, ben organizzato e manutenibile. Lo svantaggio principale è determinato dall'obbligo di scrivere molto più codice per arricchire ogni selettore con i suoi antenati.
Per semplificare questo processo possiamo avvalerci di una delle principali funzionalità di SASS che permette una stesura semplice di codice con selettori nidificati.
Ipotizziamo di voler definire lo stile dei tag p, span e a contenuti all'interno di un div con id = main. La sintassi CSS standard ci imporrebbe di scrivere:
#main p {
font-size: 1,5em;
margin-bottom: 10px;
}
#main span {
font-size: 1.2em;
padding-left: 10px;
}
#main a {
color: red;
text-decoration: none;
}La sintassi SASS ci permetterà di scrivere lo stesso codice in modo più leggibile:
#main {
p {
font-size: 1,5em;
margin-bottom: 10px;
}
span {
font-size: 1.2em;
padding-left: 10px;
}
a {
color: red;
text-decoration: none;
}
}I livelli di nidificazione possono essere maggiori. Possiamo ad esempio trasformare il seguente codice:
#main {
background-color: red;
}
#main div {
color: blue
}
#main div .red {
color: red;
}
#main div .red a {
text-decoration none;
}in questo:
#main {
background-color: red;
div {
color: blue
.red {
color: red;
a {
text-decoration none;
}
}
}
}Facciamo comunque attenzione a non esagerare con i livelli di nidificazione. Il rischio è di aumentare sensibilmente la dimensione del file css prodotto, di appesantire il rendering della pagina e di perdere i vantaggi di manutenibilità.
L'utilizzo della keyword &
Abbiamo visto come sia semplice scrivere selettori nidificati. Ci sono situazioni in cui la sintassi precedente non è sufficiente quali ad esempio la definizione dello stile hover di un elemento o lo stile per una classe specifica dell'elemento padre.
SASS ci mette a disposizione la keyword e-commerciale (&) che, in fase di compilazione viene sostituita con il selettore padre (o con la catena di selettori padre).
Per capire meglio il funzionamento prendiamo, quale esempio, la definizione dello stato hover di un link. Il codice che vogliamo ottenere è il seguente:
#a {
color: red;
font-size: 1.5em;
text-decoration: none;
}
#a:hover {
text-decoration: underline;
}Con SASS sarà sufficiente scrivere:
#a {
color: red;
font-size: 1.5em;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}Come già detto in precedenza, la keyword & viene sostituita con il selettore padre in qualsiasi posizione essa si trovi. Possiamo quindi utilizzarla per aggiungere un suffisso al selettore padre o per aggiungere una definizione più specifica del selettore qualora sia esso stesso figlio di altri selettori.
Il codice SASS:
#main {
color: black;
&-sidebar {
border: 1px solid;
}
body.firefox & {
line-height: 1.5em
}
}genererà il seguente codice:
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
body.firefox #main{
line-height: 1.5em
}Proprietà nidificate
Esistono alcune proprietà css che hanno un prefisso comune. SASS fornisce una scorciatoia per non doverlo scrivere più volte: è sufficiente scrivere il prefisso e poi nidificare le diverse proprietà.
Ad esempio le proprietà font-family, font-size, font-weigth che hanno in comune 'font' possono essere definite tramite il seguente codice:
#main{
font: {
family: Georgia;
size: 1.5em;
weight: bold;
}
}che verrà così compilato:
#main {
font-family: Georgia;
font-size: 1.5em;
font-weight: bold;
}Al prefisso stesso possiamo associare delle proprietà. Proviamo ad estendere il codice precedente in questo modo:
#main {
font: 2px/3px {
family: Georgia;
size: 1.5em;
weight: bold;
}
}Otterremo il seguente codice:
#main {
font: 2px/3px;
font-family: Georgia;
font-size: 1.5em;
font-weight: bold;
}