Mixins dans SASS

Cet article explique les mixins dans SASS.

Nous expliquerons les mixins dans SASS avec des exemples pratiques.

YouTube Video

Mixins dans SASS

Aperçu – Qu'est-ce qu'un mixin ?

Les mixins sont un mécanisme qui vous permet de définir des ensembles de propriétés de style couramment utilisées comme des fonctions réutilisables, que vous pouvez appeler où vous le souhaitez. Ils sont très utiles pour garder vos classes CSS et propriétés multiples DRY (Don't Repeat Yourself - Ne vous répétez pas).

Exemple : Le mixin le plus simple

Voici un exemple simple d'un mixin qui réutilise border-radius et box-shadow ensemble. En appelant ce mixin, vous pouvez appliquer le même aspect à plusieurs éléments.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}

• Avec ce mixin, vous n'avez plus besoin de répéter ces styles directement.
• L'appel ne nécessite qu'une seule ligne : @include card-style;.

Mixins avec arguments (paramètres)

Les mixins peuvent accepter des arguments, tout comme les fonctions. Cela vous permet de modifier l'apparence avec la même logique. Voici un exemple où la couleur est prise en tant qu'argument.

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}

• En fournissant une valeur par défaut, vous pouvez contrôler le comportement lorsqu'un argument est omis.
• Dans cet exemple, le rayon par défaut est utilisé et seule la couleur d'arrière-plan est remplacée.

Cas d'utilisation d'arguments variadiques (...)

Lorsque vous souhaitez accepter plusieurs valeurs, vous pouvez utiliser des arguments variadiques ($args...). C'est utile pour générer des classes utilitaires ou passer des listes alternatives.

C'est pratique lorsque vous devez passer plusieurs familles de polices ou plusieurs valeurs d'ombre portée.

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}

• Côté appelant, vous pouvez passer plusieurs ombres séparées par des virgules.
• De cette façon, vous pouvez utiliser le même mixin pour des ombres simples ou complexes.

Mixins avec @content — Réception d'un bloc

Avec @content, un mixin peut recevoir un bloc de styles de l'appelant. Cela permet au mixin de fournir un conteneur commun, tandis que l'appelant précise les détails internes.

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}

• Côté appelant, vous pouvez ajouter un bloc à @include pour insérer des styles à l'intérieur.
• Ce modèle est utile pour des conteneurs de disposition tels que des grilles, cartes et formulaires.

Mixins avancés utilisant les conditionnels et les boucles

Des structures de contrôle telles que @if et @for peuvent être utilisées dans les mixins. Vous pouvez les utiliser pour automatiser la génération d'utilitaires et regrouper les paramètres responsives.

Voici un exemple de génération automatique de largeurs de classes utilitaires.

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);

• En passant simplement une carte des fractions que vous souhaitez générer lors de l’appel, vous pouvez créer automatiquement toutes les classes utilitaires correspondantes en une seule fois.
• Utiliser cette approche présente l’avantage de réduire les définitions manuelles de styles tout en maintenant la cohérence de votre design.

Mixins vs Placeholders (%placeholder)

Alors que les mixins insèrent directement un ensemble de propriétés, les placeholders sont utilisés avec @extend lors de l’héritage des styles. Les mixins peuvent générer du CSS en double dans certains cas, mais @extend peut produire un CSS plus compact dans certaines situations.

En comprenant les objectifs et les différences du CSS généré par chaque méthode, vous serez en mesure de choisir l’approche la plus optimale.

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}

• Lorsque vous effectuez un @extend sur un placeholder, plusieurs sélecteurs peuvent être rassemblés en une seule règle, produisant ainsi un CSS plus compact.
• En revanche, comme les mixins insèrent les propriétés directement là où c’est nécessaire, ils offrent de la flexibilité et aident à éviter la fusion involontaire de sélecteurs.

Modèles pratiques courants (responsive, préfixes vendeurs, etc.)

En pratique, il est utile de placer les traitements courants comme les préfixes vendeurs ou le responsive dans des mixins. Voici un exemple combinant transform et les propriétés préfixées. Vous pouvez centraliser le code pour la compatibilité des navigateurs, ce qui facilite la maintenance.

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}

• L’utilisation est simple et vous pouvez l’employer partout, par exemple @include transform(rotate(10deg));.
• Même si les préfixes deviennent inutiles à l’avenir, la maintenance devient plus facile car la mise à jour du mixin se répercutera dans l’ensemble de votre base de code.

Exemple pratique : Combinaison de cartes et de boutons

Ci-dessous se trouve un exemple où les styles des boutons utilisés dans la carte sont unifiés à l’aide d’un mixin, permettant de les changer selon la couleur du thème.

Cela organise le schéma couramment utilisé 'carte + bouton' en utilisant des mixins.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}

• En utilisant ces mixins, vous pouvez écrire vos composants de façon succincte.

Attention aux performances et au CSS généré

Comme les mixins insèrent les propriétés à chaque appel, l'utilisation intensive de @include pour une même règle peut alourdir votre CSS final. Vous pouvez optimiser en les combinant avec des placeholders et une conception par composants si nécessaire.

De plus, les mesures suivantes sont également efficaces.

• Les styles fréquemment utilisés devraient être transformés en classes pour être réutilisés.
• Les motifs courants devraient être regroupés à l’aide de @content.
• La génération d’utilitaires complexes ne devrait être effectuée qu’au moment de la compilation.

Astuces pour faciliter le débogage

Lors de l’utilisation de mixins, il est également important de trouver des méthodes pour améliorer le débogage et la maintenabilité. En utilisant des noms de variables clairs et en ajoutant des commentaires dans les mixins, il sera plus facile de comprendre lors de la relecture du code ultérieurement. De plus, si la fonctionnalité devient complexe, diviser le mixin en unités plus petites facilitera les tests et améliorera la maintenabilité.

En outre, l’activation des source maps permet de suivre facilement quel mixin a généré quel CSS, ce qui facilite l’identification des problèmes.

Voici un exemple de mixin facile à comprendre avec des commentaires de documentation.

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}

• Avoir des commentaires de documentation organisés de cette manière facilite le partage et la compréhension au sein de l’équipe.
• Puisque les commentaires de documentation SASS peuvent être extraits automatiquement avec des outils compatibles, ils sont également utiles pour générer des documents comme des guides de style.

Résumé

Comme les mixins permettent de regrouper les styles couramment utilisés pour la réutilisation, ils aident à réduire la duplication de code et à améliorer la maintenabilité. Également, lorsque plusieurs sélecteurs partagent les mêmes règles, envisagez d'utiliser non seulement des mixins mais aussi @extend (placeholders). De plus, bien que @content permette une séparation flexible des wrappers de mise en page et du contenu, l'abus de @include peut entraîner un CSS généré encombrant, il convient donc de faire preuve de prudence. Il est important de profiter pleinement des arguments, valeurs par défaut et arguments variadiques pour concevoir des mixins génériques et faciles à étendre.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video