sass - 防止 sass 颜色名称在插值内扩展

Question

我正在尝试自动构建一些选择器来帮助对 zurb 基础弹出窗口进行着色。

我很确定我以前有过这个工作。但在我进入细节之前，这里是 sass ：

.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")

Answer 1

我不确定你是如何得到这个错误的；您的示例中提供+coloured-flyout的内容不太有效，因为它需要两个输入。

这是满足您要求的 .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;
}

现场示例：http ://sassmeister.com/gist/7833015