sass的each方法编译失败？

Question

_color.scss里面是这样

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

为什么会编译失败？

Answer 1

这分明是对英文的理解。以第一段为例：你以颜色名称"red" 字符串为占位符，但red值可能为 #ff0000, 这样生成的css是无效的。所以这里字符串用双引号引用。如果确实要用颜色名称的字符串，请在占位符中使用 ""+$color 表示。那么也就是说，这里的占位符最好这样用： #{""+$color}

Answer 2

use "" + $color放在你的代码第三行，替换原来的 $color 试试。另外，这是一个 warning，不是 error。UPDATE：这样写确认有效：$colors: red, green, blue, black; @each $color in $colors {   .#{$color} {       color: $color;   } }