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:
Successivamente è possibile utilizzare il mixin tramite la direttiva @include:
background: $myColor;
}
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.
@include setColorButton(red);
}
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.
@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:
- 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