Maison >interface Web >tutoriel CSS >Comment définir les propriétés CSS en tant que valeurs de mixage dans SASS à l'aide de l'interpolation de chaîne ?

Comment définir les propriétés CSS en tant que valeurs de mixage dans SASS à l'aide de l'interpolation de chaîne ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-29 21:52:29827parcourir

How do you set CSS properties as mixin values in SASS using string interpolation?

Définition des valeurs de mixin SASS sur les propriétés CSS

Lors de la création de mixins de marge/remplissage universels, il peut être nécessaire de définir les propriétés CSS en tant que valeurs de mixin. Pour y parvenir, une interpolation de chaîne est utilisée.

Interpolation de chaîne pour les propriétés CSS

Pour utiliser des variables comme noms de propriétés CSS, une interpolation de chaîne (#{$var}) est requise.

Exemple

Le mixin suivant montre comment définir les propriétés CSS à l'aide de l'interpolation de chaîne :

<code class="scss">[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}</code>

Remarque

Lors de l'utilisation de sélecteurs d'attributs (*="_m"), il est important de considérer les conflits potentiels avec d'autres classes qui contiennent "_mid" dans leur nom.

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