Le classi in Sass

Sfruttare appieno le funzionalità di Sass definendo delle classi con delle proprietà da far ereditare ad altre classi

In SASS è possibile definire delle classi con l’unico scopo di estenderle e far ereditare le informazioni (il concetto si avvicina vagamente a quello delle interfacce in Java). Per poter estendere una classe in Sass bisogna utilizzare la parola chiave @extend in questo modo:

    .datrevo-text {
        color: #ffffff;
        text-align: center;
    }
    .my-text-class {
        @extend .datrevo-text;
        font-size: 10px;
    }

La classe che verrà generata sarà:

    .datrevo-text, .mybox {
        color: #ffffff;
        text-align: center;
    }
    .my-text-class {
        font-size: 10px;
    }

In questo caso la classe “padre” è stata generata una sola volta come singola classe, per renderla solo estendibile è possibile utilizzare il simbolo della percentuale “%” prima del nome della classe. Al momento della compilazione, Sass sarà in grado di capire che la classe non dovrà essere generata ma sarà utilizzata solo per essere estesa:

    %datrevo-text {
        color: #ffffff;
        text-align: center;
    }
    .my-text-class {
        @extend .datrevo-text; // equivalente a %datrevo-text
        font-size: 10px;
    }

Il file CSS generato sarà il seguente:

    .my-text-class {
        color: #ffffff;
        text-align: center;
        font-size: 10px;
    }

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 *

*