防止sass颜色名称在插值内展开 我试图自动构建一些选择器来帮助着色Zurb基金会Flash。

我很确定我以前做过这个。但在我进入细节之前，这里是一些讽刺：

.flyout
    @each $color in (green, brown, blue, darkred, maroon, saddlebrown)
        &.#{$color}
            border: 1px solid tint($color, 10%)
            background: tint($color, 20%)

我很确定会有一些人被我的方法冒犯，不管我希望结果如何：

.flyout.green{
    border: 1px solid the-ten-percent-tinted-green;
    background: the-twenty-percent-tinted-green;
}

... etc, etc

相反，我得到：

>>> Change detected at 12:08:57 to: components/zurb/_flyout.sass
    error sass/app.sass (Line 132 of sass/components/zurb/_flyout.sass: Invalid CSS after "&.": expected class name, was "#8b4513")

---

我不知道你是怎么犯这个错误的；您的示例中提供的

+彩色弹出按钮

不太有效，因为它需要两个输入

以下是满足您要求的.sass：

=coloured-flyout($color)
  border: solid tint($color, 10%) 1px
  background-color: tint($color, 20%)

.flyout
  @each $color in green, brown, blue, darkred, maroon, saddlebrown
    &.#{$color}
      +coloured-flyout($color: $color)

它汇编为：

.flyout.green {
  border: solid #198c19 1px;
  background-color: #339933;
}
.flyout.brown {
  border: solid #ae3f3f 1px;
  background-color: #b75454;
}
.flyout.blue {
  border: solid #1919ff 1px;
  background-color: #3333ff;
}
.flyout.darkred {
  border: solid #961919 1px;
  background-color: #a23333;
}
.flyout.maroon {
  border: solid #8c1919 1px;
  background-color: #993333;
}
.flyout.saddlebrown {
  border: solid #96572a 1px;
  background-color: #a26a42;
}

---

活生生的例子：

不，不是重复的。你如何判断它不是重复的？您的颜色关键字正在转换为其十六进制等效值。颜色出现在何处（类名、属性值等）无关紧要，只关系到您使用的压缩模式。其他两种模式与使用颜色值有关，这与按原样使用颜色名称有关。我不想把它们转换成十六进制值。问题不在于mixin的使用，问题在于插值将颜色名称扩展为十六进制变量。这就是问题的标题。@airtonix-您能澄清一下您遇到的问题吗？即使没有mixin，.sass也会使用诸如

flyout.green

之类的选择器编译为CSS，但是当我发表这篇文章时，它会试图以

flytout.#8b4513

的形式出现，这导致了错误。我怀疑这和指南针有关。但就像我说的。这种情况不再发生。