Differenze tra extend e include (mixin) in Sass

Le direttive extend e include consentono di definire una serie di funzioni da poter riutilizzare nel codice Sass: differenze tra extend e include

Tra le varie funzionalità offerta da Sass, due potrebbero generare confusione, si tratta di extend e include. La direttiva extend viene utilizzata per estendere delle classi CSS ed ereditare le proprietà della classe padre, mentre la direttiva include invece viene utilizzato per utilizzare un mixin definito tramite la direttiva @mixin.

Facciamo un esempio con una classe box da estendere:

    %box {
        border: 1px solid #000;
        background-color: green;
    }
    .myfirstbox {
        @extend %box; // oppure @extend .box;
        font-size: 10px;
    }
    .mysecondbox {
        @extend %box; // oppure @extend .box;
        font-size: 12px;
    }

Il CSS risultante sarà:

    .myfirstbox, .mysecondbox {
        border: 1px solid #000;
        background-color: green;
    }
    .myfirstbox {
        font-size: 10px;
    }
    .mysecondbox {
        font-size: 12px;
    }

I mixin consentono di scrivere una “funzione” a cui poter passare dei parametri, ne abbiamo discusso nel precedente articolo: I mixin in Sass. Utilizzando i mixin con l’esempio precedente avremo:

    @mixin box {
        border: 1px solid #000;
        background-color: green;
    }
    .myfirstbox {
        @include box;
        font-size: 10px;
    }
    .mysecondbox {
        @include %box;
        font-size: 12px;
    }

Il CSS generato sarà:

    .myfirstbox {
        border: 1px solid #000;
        background-color: green;
        font-size: 10px;
    }
    .mysecondbox {
        border: 1px solid #000;
        background-color: green;
        font-size: 12px;
    }

Con i mixin sono state replicate le informazioni ma le classi sono solo 2, con l’extend invece sono state definite 4 classi. Con la minificazione il CSS risultante sarà lo stesso, in linea di massima però i mixin offrono più funzionalità dell’utilizzo degli extend (passaggio di parametri, ecc.). A livello di manutenzione non ci sono particolari differenze, ma gli extend se dichiarati all’esterno delle media query non possono essere utilizzati al loro interno se non definendoli per ogni media query.

Un buon articolo sulle differenze tra mixin ed extend si trova su bellycard.com.

Ecco l’elenco delle lezioni su Sass:

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

Lascia un commento

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

*