Comment puis-je définir dynamiquement des variables de couleur Sass en fonction des classes d'éléments HTML ?

Configuration de variables 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 :

<code class="scss">section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}</code>

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

<code class="scss">html {
  &amp;.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

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

    @import "theme";
 }
}</code>

Utilisation de Mixins

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

<code class="scss">@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}</code>

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

<code class="scss">html {
  &amp;.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

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

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

    @include theme($accent, $base, $flat);
 }
}</code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!