作为SASS mixin值的CSS属性

我试图build立一些通用的边缘/填充混合…

这是我的代码：

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

有些东西是不正确的，所以我想知道是否有可能设置一些CSS属性作为一个混合值？ 任何人都可以帮忙吗？

Answer 1

如果要将variables用作属性名称，则需要使用string插值 – #{$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); } } 

DEMO

只是一个注释：对于你的属性select器… *="_m"也适用于那些有_mid在他们（见这里 ）…所以也许你应该重新考虑这一点。