CSS 属性作为 SASS 混合值 [英] CSS property as SASS mixin value
本文介绍了CSS 属性作为 SASS 混合值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试构建一些通用的边距/填充混合...
I try to build some universal margin/padding 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 属性设置为 mixin 值?有人可以帮忙吗?
Something is not right, so I wonder if it is possible to set some CSS property as a mixin value? Can anybody help?
推荐答案
如果你想使用变量作为属性名称,你需要使用 字符串插值 - #{$var}
.
If you want to use variables as property names you need to use 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
他们(见这里)......所以也许你应该重新考虑一下.
DEMO
Just a note: for your attribute selectors ... *="_m"
will also apply to the ones that have _mid
in them (see here) ... so maybe you should rethink this a little.
这篇关于CSS 属性作为 SASS 混合值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文