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

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

1 个答案: