Comment utiliser les propriétés CSS comme valeurs SASS Mixin : un guide d'interpolation de chaînes

Utilisation des propriétés CSS comme valeurs de mixage SASS

En essayant de créer un mixin de marge/rembourrage polyvalent, vous avez rencontré un problème dans SASS. Examinons le problème que vous avez décrit et trouvons une solution ensemble.

Définition des propriétés CSS dans les mixins

Votre code tente de définir les propriétés CSS (marge et remplissage) dans les valeurs du mixin SASS. Cependant, il existe un problème clé : les propriétés CSS ne peuvent pas être utilisées directement comme valeurs de mixage. Au lieu de cela, vous devez utiliser une technique appelée « interpolation de chaîne » pour inclure des variables en tant que noms de propriété.

Utilisation de l'interpolation de chaîne

L'interpolation de chaîne vous permet d'insérer des valeurs de variable dans des chaînes à l'aide du #{$ syntaxe variable}. Cela vous aide à définir les propriétés CSS de manière dynamique en fonction des variables dans les mixins.

Voici comment modifier votre code pour utiliser l'interpolation de chaîne :

<code class="sass">[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 sur les sélecteurs d'attributs

Il est important de noter que le sélecteur d'attribut que vous utilisez (*="_m") fera également correspondre les éléments avec "_mid" dans leurs noms de classe. Ce n'est peut-être pas le comportement que vous souhaitiez, alors pensez à réviser votre sélecteur d'attribut en conséquence.

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!