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

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!