Configuration de variables de couleur Sass dynamiques basées sur les classes d'éléments HTML

Question : Puis-je définir dynamiquement des variables de couleur Sass en fonction des classes appliquées à un élément HTML ?

Réponse : Oui, vous pouvez y parvenir grâce à l'utilisation d'includes ou de mixins Sass.

Utilisation d'includes

Dans un fichier séparé (_theme .scss), définissez les styles à l'aide de vos variables Sass :

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

Dans votre fichier Sass principal (main.scss), importez l'inclusion en fonction de la classe sur l'élément HTML :

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

Utiliser des mixins

Vous pouvez également créer un mixin qui prend les couleurs comme arguments :

@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}

Dans votre fichier Sass principal, invoquez le mixin avec les couleurs appropriées :

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @include theme($accent, $base, $flat);
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @include theme($accent, $base, $flat);
 }
}

Cette approche vous permet d'appliquer différents thèmes aux éléments HTML de manière dynamique en fonction de leurs classes.