Comment styliser dynamiquement des éléments HTML avec des variables Sass : inclusions ou mixins ?

Style dynamique des éléments HTML avec des variables Sass

Scénario :

Vous souhaitez attribuer des variables de couleur aux éléments HTML en fonction de leurs classes.

Solution :

Sass propose deux méthodes pour y parvenir :

1. Utilisation d'Inclus

Créez un fichier "_theme.scss" distinct avec le code suivant :

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

.foo {
  border: $base;
}

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

Dans votre fichier Sass principal, importez le fichier "_theme.scss" dans le Blocs de sélection "&" :

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

    @import "theme";
  }

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

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

2. Utilisation des mixins

Définissez un mixin "_theme" qui prend trois arguments de couleur :

<code class="scss">@mixin theme($accent, $base, $flat) {
  // Sass code to style the elements
}</code>

Ensuite, appliquez le mixin à différents sélecteurs de classe dans les blocs "&" :

<code class="scss">html {
  &.sunrise {
    @include theme(#37CCBD, #3E4653, #eceef1);
  }

  &.moonlight {
    @include theme(#18c, #2a2a2a, #f0f0f0);
  }
}</code>

Les deux méthodes vous permettent de changer dynamiquement les couleurs des éléments en fonction des classes qu'ils possèdent.

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!