Maison  >  Article  >  interface Web  >  Comment styliser dynamiquement des éléments HTML avec des variables Sass : inclusions ou mixins ?

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-30 16:58:25350parcourir

How to Dynamically Style HTML Elements with Sass Variables: Includes vs 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn