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, l'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é 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 :

[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

Lors de l'utilisation de sélecteurs d'attributs (*="_m"), il est important de prendre en compte les conflits potentiels avec d'autres classes qui contiennent "_mid" dans leurs noms.