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

Question

鉴于我有一个列表:

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

Answer 1

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

坏的:

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

好:

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