Maison > Article > interface Web > Comment utiliser les propriétés CSS comme valeurs SASS Mixin : un guide d'interpolation de chaînes
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.
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é.
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>
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!