Nidificare gli elementi e le proprietà in Sass

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 {
        display: block;
        font-size: 10px;
        ul {
            display: inline;
        }
    }


Verrà generato il seguente file CSS:

    p {
        display: block;
        font-size: 10px;
    }

    p ul {
        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 “;“:

    p
        display: block
        font-size: 10px
        ul
            display: inline

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.

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:

    #main{
        font: {
            family: Georgia;
            size: 1.5em;
            weight: bold;
        }
    }

In questo modo abbiamo evitare di dover scrivere la parola “font” più volte, il file risultate sarà:

    #main {
        font-family: Georgia;
        font-size: 1.5em;
        font-weight: bold;
    }

Ecco l’elenco delle lezioni su Sass:

Pubblicato in CSS, Front-end, JavaScript, Programmazione, Sass Taggato con: , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*