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

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

Barbara Streisand

Libérer： 2024-10-27 10:52:30

original

1000 Les gens l'ont consulté

Can SASS Mixin Values Be Dynamic CSS Properties?

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

Copier après la connexion

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

Copier après la connexion

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!