css - SCSS/SASS @mixin $list @each 迭代问题

Question

鉴于我有一个清单：

$box-shadow-properties: -webkit-box-shadow, -moz-box-shadow, box-shadow;

我希望能够遍历此列表以获取 mixin：

@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 文件——就好像它被完全忽略了一样。有人有什么想法吗？

Answer 1

弄清楚了。显然，当与这样的列表一起使用时，您必须插入属性名称。所以：

坏的：

$property: $box-shadow-params, $inset-params;

好的：

#{$property}: $box-shadow-params, $inset-params;