Mixin e inclusioni

Un mixin in Sass è un blocco riutilizzabile di dichiarazioni CSS. A differenza di una classe normale, può accettare parametri, risultando più flessibile del copia e incolla. Si definisce con @mixin e si utilizza con @include.

Un mixin senza parametri è semplicemente un blocco riutilizzabile:

Passi i valori a un mixin per personalizzarne l'output:

Imposti valori predefiniti per gli argomenti del mixin, così da renderli facoltativi:

Passi gli argomenti del mixin specificandone il nome, per maggiore chiarezza:

I mixin possono accettare un blocco di contenuto utilizzando @content. Il blocco incluso viene inserito nel punto in cui compare @content:

Un mixin comune per le media query:

Un mixin per gli stili testuali, utile a mantenere coerente la scala tipografica:

I mixin producono dichiarazioni CSS, mentre le funzioni restituiscono un valore. Utilizzi un mixin quando desidera produrre più regole CSS; utilizzi una funzione quando ha bisogno di un singolo valore calcolato.

Un numero eccessivo di mixin crea un livello di indirezione astratto difficile da sottoporre a debug. Crei un mixin solo se un pattern viene riutilizzato almeno 3 volte. Per gli stili utilizzati una sola volta, scriva direttamente il CSS.

Qual è lo scopo di @content all'interno della definizione di un mixin Sass?

Definisca i mixin con @mixin e li utilizzi con @include. I mixin accettano parametri con valori predefiniti facoltativi. @content consente a chi li utilizza di inserire blocchi CSS nel mixin, abilitando pattern contenitore come gli helper per le media query. Crei mixin solo per i pattern riutilizzati più volte, così da evitare il sovraccarico dell'astrazione.