鉴于我有一个列表:
$box-shadow-properties: -webkit-box-shadow, -moz-box-shadow, box-shadow;
我希望能够迭代此列表以进行混合:
@mixin box-shadow-with-inset($box-shadow-params, $inset-params) {
@each $property in $box-shadow-properties {
$property: $box-shadow-params, $inset-params;
}
}
这样我就可以这样调用它:
@include box-shadow-with-inset(0px 1px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(0, 0, 0, 0.1));
没有编译错误,但它没有编译到CSS文件——就好像它被完全忽略了一样。大家有什么想法吗?
最佳答案
想通了。显然,当与这样的列表结合使用时,您必须插入属性名称。所以:
坏:
$property: $box-shadow-params, $inset-params;
好:
#{$property}: $box-shadow-params, $inset-params;
关于css - SCSS/SASS @mixin $list @each 迭代问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10135745/