Maison > interface Web > tutoriel CSS > 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
Libérer: 2024-10-30 16:58:25
original
435 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal