Les valeurs SASS Mixin peuvent-elles être des propriétés CSS dynamiques ?

Les valeurs SASS Mixin peuvent-elles être des propriétés CSS ?

Problème :

Création d'une marge universelle /padding mixin, vous n'avez pas réussi en raison d'une structure de code incorrecte :

[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);
  }
}

Solution :

Pour utiliser des variables comme noms de propriétés CSS dans une valeur de mixin , une interpolation de chaîne est requise, réalisée à l'aide de la syntaxe #{$var} :

[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);
  }
}

Remarque : Assurez la spécificité du sélecteur en réévaluant la structure du sélecteur d'attribut.

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!