@mixin e @include in sass | Spiegato

Il foglio di stile sintatticamente fantastico (SASS) è popolare per facilitare i suoi utenti a scrivere il codice CSS a secco (non ripetere te stesso) che è pulito, più leggibile e riutilizzabile. In questo modo Sass aumenta la potenzialità del linguaggio CSS di base. Uno di questi modo per scrivere un codice CSS riutilizzabile che utilizza SASS è attraverso la creazione di un mixin mediante regola @mixin e include questo mixin usando la regola @Include. Per saperne di più su queste regole segui l'articolo di seguito.

Regole sass @mixin e @include

La regola @mixin in SASS ti consente di creare un codice CSS riutilizzabile. Questo codice riutilizzabile è costituito da stili ridondanti, quindi questi sono raggruppati in modo che questi possano essere utilizzati ovunque nel codice ove richiesto. Questo pezzo di codice si chiama mixin. Ai fini dell'utilizzo di un mixin nel codice, Sass fornisce la regola @Include.

Qui ti guideremo su come creare e utilizzare un mixin.

Come definire un mixin

Allo scopo di definire un mixin, usa la direttiva @mixin e raggruppa insieme gli stili CSS ridondanti e riutilizzabili.

Sintassi della regola @mixin

@mixin mixin-name
costo dell'immobile;
costo dell'immobile;

Dopo aver usato la direttiva @Mixin, devi nominare quella particolare miscela e quindi scrivere le proprietà CSS in quel blocco e una mixin verrà creata correttamente. Ecco un esempio di un mixin.

@mixin header
Background-color: verde;
Font-size: 30px;
Font-weight: audace;

Voila, è stato creato un mixin per un'intestazione! Ora ogni volta che hai bisogno di modellare la tua intestazione non è necessario scrivere quelle proprietà, ancora e ancora, usa semplicemente il mixin sopra e sei a posto. Ma come usare questo mixin? Bene, come menzionato sopra usando la regola @include è possibile utilizzare un mixin.

Sintassi della regola @Include

selettore
@include mixin-name;

In questo modo puoi includere un mixin nel tuo codice dove richiesto. Ad esempio, includiamo il mixin di intestazione che abbiamo creato sopra.

.intestazione
@include header;

Quando il file SASS viene traspirato, il codice sopra fornirà il seguente file di output CSS risultante.

.intestazione
Background-color: verde;
Font-size: 30px;
Font-weight: audace;

Un altro vantaggio di questa regola @Include è che puoi includere più mixin insieme. Ad esempio, di seguito abbiamo incluso tre mixin in un altro mixin.

@mixin mixin1
@include mixin2;
@include mixin3;
@include mixin4;

In questo modo puoi usare più mixin insieme.

Fino ad ora abbiamo imparato a conoscere i mix senza passare argomenti. Nella sezione successiva, vedremo come puoi passare gli argomenti a un mixin.

Come passare gli argomenti a un mixin

Passare argomenti a Mixin si rivela utile quando si desidera raggruppare un insieme simile di proprietà CSS insieme, tuttavia, i valori passati a tali proprietà potrebbero differire. Ecco come è possibile definire un mixin passando una discussione.

@mixin bordo ($ color, $ width)
Border: $ larghezza punteggiata $ color $;

.Container
@include bordo (rosa, 2px);

.scatola
@include bordo (viola, 3px);

Nel frammento di codice sopra, abbiamo creato un mixin con il bordo del nome e abbiamo superato due argomenti. Quando si usano questo mixin mentre lo styling di altri elementi abbiamo usato la regola @Include, nel frattempo, i valori passati alla miscela di frontiera differiscono in ciascun caso. Qui gli argomenti superati sono impostati come variabili.

Un'altra cosa che puoi fare con i mixin è che puoi assegnare valori predefiniti agli argomenti passati ai mixin.

@mixin bordo ($ larghezza: 2px, $ color: rosa)
Border: $ larghezza punteggiata $ color $;

Se desideri mantenere i valori predefiniti, allora dipende da te, tuttavia, se si desidera modificare un valore particolare, ecco come sarà fatto.

.contenitore
@include bordo ($ larghezza: 3px);

Il colore applicato al bordo del selettore sarà lo stesso definito nel valore predefinito.

Conclusione

La regola @mixin in SASS ti consente di creare un codice CSS riutilizzabile chiamato Mixin, in cui è possibile raggruppare proprietà e valori CSS ridondanti che possono essere utilizzati ovunque nel codice quando richiesto. Nel frattempo, la regola @Include viene utilizzata per aggiungere un mixin nel tuo codice. Puoi anche passare argomenti a un mixin quando si desidera raggruppare un insieme simile di proprietà CSS con valori diversi. Questo e molto altro sulla regola @mixin e @include è stato compilato in questo articolo per te.