I mixin in Sass

Creare delle “funzioni” che accettano dei parametri in ingresso tramite in mixin in Sass

I mixin consentono di creare gruppi di selettori e proprietà CSS in modo da poterli riutilizzare all’interno dei fogli di stile. In Sass è possibile applicare dei parametri arbitrari sui mixin, in maniera molto simile all’invocazione di una funzione. Definiamo un mixin in questo modo:

    @mixin setColorButton($myColor) {
        background: $myColor;
    }

Successivamente è possibile utilizzare il mixin tramite la direttiva @include:

    button.red{
        @include setColorButton(red);
    }

I mixin sono simili a delle normali funzioni (definite con la direttiva @extend) ma offrono la possibilità di passare dei valori da impostare nelle proprietà CSS.

Le direttive @function e @return

La direttiva @function può essere considerata una generalizzazione dei @mixin, oltre ad arricchire un selettore con un set di proprietà, consente di calcolare il valore di una proprietà. Ad esempio, @function accetta dei parametri in ingresso, effettua una elaborazione e ritorna un valore utilizzando la direttiva @return.

    @function stripes($nr,$url) {
        @return unquote($stripe + ", url(" + $url + ")");
    }

Alcune funzioni molto utilizzate con la direttiva @function sono darken, lighten e complement che rendono il colore passato in ingresso rispettivamente più chiaro, più scuro o calcolano il complementare del colore dato.

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 *

*