Velocizzare ed ottimizzare la scrittura dei file CSS tramite la nidificazione delle regole di stile per gli elementi e le proprietà
Sass mette a disposizione la possibilità di nidificare gli elementi per evitare di definire le stesse informazioni. Definendo ad esempio in un file .scss: p ul {
display: block;
font-size: 10px;
ul {
display: inline;
}
}
Verrà generato il seguente file CSS:
display: block;
font-size: 10px;
}
display: inline;
font-size: 10px;
}
Attraverso la nidificazione degli elementi abbiamo la possibilità di non dover scrivere più volte le stesse informazioni. E’ possibile riscrivere lo stesso codice ma senza “{}” e “;“:
Il file CSS risultate è identico ma in questo caso il formato del file è .sass poiché viene utilizzata la nidificazione degli elementi tramite spazi come ad esempio avviene in Phyton. Questa notazione è detta SASS ma è meno utilizzata rispetto alla notazione SCSS con l’uso delle parentesi graffe che è pienamente compatibile con i CSS3, il seguente codice genererà lo stesso risultato dell’esempio precedente.
display: block
font-size: 10px
ul
display: inline
Una caratteristica che offre SASS, non offerta da Less, è l’opportunità di nidificare le proprietà con suffisso comune. Ad esempio le proprietà font-family, font-size, font-weigth che hanno in comune “font” possono essere definite tramite il seguente codice:
In questo modo abbiamo evitare di dover scrivere la parola “font” più volte, il file risultate sarà:
font: {
family: Georgia;
size: 1.5em;
weight: bold;
}
}
font-family: Georgia;
font-size: 1.5em;
font-weight: bold;
}
Ecco l’elenco delle lezioni su Sass:
- Indice
- SASS: un preprocessore per generare file CSS
- Nidificare gli elementi e le proprietà
- Le variabili nei file CSS
- Le classi in Sass
- I file parziali
- Le media query
- La direttiva if
- I cicli for, each e while
- I mixin in Sass
- Differenze tra extend e include (mixin) in Sass
- Compass, un tool di sviluppo per Sass
Lascia un commento