Mixins et inclusions

Un mixin dans Sass est un bloc réutilisable de déclarations CSS. Contrairement à une classe ordinaire, il peut accepter des paramètres, ce qui le rend plus flexible que le copier-coller. Définissez-le avec @mixin et utilisez-le avec @include.

Un mixin sans paramètres est simplement un bloc réutilisable :

Transmettez des valeurs à un mixin pour personnaliser sa sortie :

Définissez des valeurs par défaut pour les arguments d’un mixin afin de les rendre facultatifs :

Transmettez les arguments d’un mixin par leur nom pour plus de clarté :

Les mixins peuvent accepter un bloc de contenu à l’aide de @content. Le bloc inclus est injecté à l’endroit où apparaît @content :

Un mixin courant pour les requêtes multimédias :

Un mixin de style de texte pour assurer la cohérence de l’échelle typographique :

Les mixins produisent des déclarations CSS, tandis que les fonctions renvoient une valeur. Utilisez un mixin lorsque vous souhaitez produire plusieurs règles CSS, et une fonction lorsque vous avez besoin d’une seule valeur calculée.

Un trop grand nombre de mixins crée une indirection abstraite difficile à déboguer. Ne créez un mixin que si un modèle est réutilisé au moins trois fois. Pour les styles ponctuels, écrivez simplement le CSS directement.

Quel est le rôle de @content dans la définition d’un mixin Sass ?

Définissez les mixins avec @mixin et utilisez-les avec @include. Les mixins acceptent des paramètres avec des valeurs par défaut facultatives. @content permet aux appelants d’injecter des blocs CSS dans le mixin, ce qui permet de créer des modèles d’enveloppe tels que les utilitaires pour requêtes multimédias. Créez des mixins uniquement pour les modèles réutilisés plusieurs fois afin d’éviter le coût de l’abstraction.