标签 html css properties sass mixins
<分区>
我尝试构建一些通用的边距/填充 mixin...
这是我的代码:
[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 属性设置为混合值？有人可以帮忙吗？
最佳答案
如果你想使用变量作为属性名你需要使用string interpolation - #{$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);
}
}
请注意:对于您的属性选择器... *="_m" 也将应用于具有 _mid 的那些他们(参见 here)...所以也许您应该重新考虑一下。
关于html - CSS 属性作为 SASS 混合值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20050932/