Parlez-moi des mixins SCSS pour les requêtes média

Les mixins SCSS pour les requêtes média permettent de réutiliser facilement et de manière répétée le code pour la conception adaptative. Au lieu d’écrire manuellement des requêtes média à chaque fois, vous pouvez définir un mixin qui accepte des paramètres et génère les règles CSS nécessaires.

Exemple d’un simple mixin pour une requête média basée sur la largeur de l’écran :

@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (min-width: 901px) {
      @content;
    }
  }
}

// Utilisation :
.container {
  width: 100%;
  @include respond-to(mobile) {
    width: 90%;
  }
}

Cette approche améliore la lisibilité et facilite la maintenance du code, permettant de gérer de manière centralisée les points de rupture (breakpoints). Il est possible d’étendre les mixins en ajoutant de nouvelles conditions ou paramètres pour une configuration plus flexible.