sass的each方法编译失败？

Question

_color.scss里面是这样

@each $color in red, green, blue, black {
        .#{$color} {
            color: $color;
        }
    }

为什么会编译失败？

Answer 1

use "" + $color

放在你的代码第三行，替换原来的 $color 试试。

另外，这是一个 warning，不是 error。

UPDATE：

这样写确认有效：

$colors: red, green, blue, black;
@each $color in $colors {
  .#{$color} {
    color: $color;
  }
}

Answer 2

这分明是对英文的理解。

以第一段为例：你以颜色名称"red" 字符串为占位符，但red值可能为 #ff0000, 这样生成的css是无效的。所以这里字符串用双引号引用。如果确实要用颜色名称的字符串，请在占位符中使用 ""+$color 表示。

那么也就是说，这里的占位符最好这样用： #{""+$color}