Comment puis-je utiliser les valeurs de propriété CSS comme paramètres de mixage SASS ?

Utilisation des valeurs de propriété CSS comme paramètres de mixage SASS

En tentant de créer un mixin de marge/padding universel, vous avez rencontré un problème impliquant la configuration Propriétés CSS en tant que valeurs de mixage. Cet article vise à résoudre ce problème en explorant l'utilisation de l'interpolation de chaîne dans les mixins SASS.

Pour définir les valeurs des propriétés CSS en tant que valeurs de mixin, vous devez utiliser l'interpolation de chaîne. Cette technique vous permet d'intégrer des variables en tant que noms de propriété dans les définitions de mixin.

Voici une version mise à jour de votre code qui intègre 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);
  }
}

La syntaxe #{$val} dans le La définition mixin vous permet de définir dynamiquement le nom de la propriété CSS.

Remarque :

• Les sélecteurs d'attribut comme *="_m" peuvent également s'appliquer aux éléments qui contiennent "_mid" dans leurs noms de classe. Cela pourrait vous inciter à repenser votre stratégie de dénomination.
• L'interpolation de chaînes est cruciale pour utiliser des variables comme noms de propriétés dans les définitions de mixin.

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!