@Mixin et @include dans SASS | Expliqué

Syntacticalement Awesome Stylesheet (SASS) est populaire pour faciliter que ses utilisateurs écrivent (ne vous répétez pas) le code CSS qui est propre, plus lisible et réutilisable. De cette façon Sass augmente la potentialité de la langue CSS de base. Une telle façon d'écrire un code CSS réutilisable en utilisant SASS est la création d'un mélange par @mixin Rule et y compris ce mixin en utilisant la règle @include. Pour en savoir plus sur ces règles, suivez l'article ci-dessous.

Sass @mixin et @include Rules

La règle @Mixin dans SASS vous permet de créer un code CSS réutilisable. Ce code réutilisable se compose de styles redondants, par conséquent, ceux-ci sont regroupés afin que ceux-ci puissent être utilisés n'importe où dans le code si nécessaire. Ce morceau de code est appelé un mixin. Dans le but d'utiliser un mixin dans votre code, Sass fournit la règle @include.

Ici, nous vous guiderons sur la façon de créer et d'utiliser un mixin.

Comment définir un mélange

Dans le but de définir un mixin, utilisez la directive @Mixin et regroupez vos styles CSS redondants et réutilisables.

Syntaxe de la règle @mixin

@mixin mixin-name
valeur de la propriété;
valeur de la propriété;

Après avoir utilisé la directive @Mixin, vous devez nommer ce mixin particulier, puis écrire des propriétés CSS dans ce bloc et un mixin sera créé avec succès. Voici un exemple de mélange.

En-tête @mixin
Color en arrière-plan: vert;
taille de police: 30px;
Police-poids: Bold;

Voila, un mixin pour un en-tête a été créé! Maintenant, chaque fois que vous avez besoin de coiffer votre en-tête, vous n'avez pas besoin d'écrire ces propriétés, encore et encore, utilisez simplement le mixin ci-dessus et vous êtes prêt à partir. Mais comment utiliser ce mélange? Eh bien, comme mentionné ci-dessus en utilisant la règle @include, un mixin peut être utilisé.

Syntaxe de la règle @include

sélecteur
@include mixin-name;

De cette façon, vous pouvez inclure un mixin dans votre code si nécessaire. Par exemple, incluons le mixin d'en-tête que nous avons créé ci-dessus.

.entête
@include en-tête;

Lorsque le fichier SASS est transpilé, le code ci-dessus donnera le fichier de sortie CSS résultant suivant.

.entête
Color en arrière-plan: vert;
taille de police: 30px;
Police-poids: Bold;

Un autre avantage de cette règle @include est que vous pouvez inclure plusieurs mixins ensemble. Par exemple, ci-dessous, nous avons inclus trois mélanges dans un autre mélange.

@Mixin Mixin1
@include mixin2;
@include mixin3;
@include mixin4;

De cette façon, vous pouvez utiliser plusieurs mixins ensemble.

Jusqu'à présent, nous avons appris les mixins sans passer des arguments. Dans la section suivante, nous verrons comment vous pouvez transmettre des arguments à un mixin.

Comment passer les arguments à un mélange

Passer des arguments à Mixin s'avère utile lorsque vous souhaitez regrouper un ensemble similaire de propriétés CSS ensemble, cependant, les valeurs transmises à ces propriétés peuvent différer. Voici comment vous pouvez définir un mixin en passant un argument.

Border @Mixin ($ couleur, $ width)
Border: $ largeur pointillé $ couleur;

.récipient
@include Border (rose, 2px);

.boîte
@include Border (Purple, 3px);

Dans l'extrait de code ci-dessus, nous avons créé un mixin par la bordure du nom et l'avons passé deux arguments. Lorsque vous utilisez ce mixin tout en stylisant d'autres éléments, nous avons utilisé la règle @include, en attendant, les valeurs transmises au mélange de bordure diffèrent dans chaque cas. Ici, les arguments passés sont définis sous forme de variables.

Une autre chose que vous pouvez faire avec les mixins est que vous pouvez attribuer des valeurs par défaut aux arguments transmis aux mixins.

Border @Mixin ($ width: 2px, $ couleur: rose)
Border: $ largeur pointillé $ couleur;

Si vous souhaitez conserver les valeurs par défaut, cela dépend de vous, cependant, si vous souhaitez modifier une valeur particulière, voici comment cela sera fait.

.récipient
@include border ($ width: 3px);

La couleur appliquée à la bordure du sélecteur sera la même que celle définie dans la valeur par défaut.

Conclusion

La règle @Mixin dans SASS vous permet de créer un code CSS réutilisable appelé un mixin, dans lequel vous pouvez regrouper les propriétés et valeurs CSS redondantes qui peuvent être utilisées n'importe où dans votre code en cas de besoin. Pendant ce temps, la règle @include est utilisée pour ajouter un mixin dans votre code. Vous pouvez également transmettre des arguments à un mixin lorsque vous souhaitez regrouper un ensemble similaire de propriétés CSS ensemble ayant des valeurs différentes. Ceci et bien plus encore sur la règle @mixin et @include a été compilé dans cet article pour vous.