Question

我在编译SASS时遇到错误。我没有运气就检查过Sass文档。

这是我的代码：

    .tag {
        float:right;
        display: block;
        width: 10px;
        height: 30px;
        &-1 { background-color: saturate($borders, 10%); }
        &-2 { background-color: saturate($borders, 20%); }
        &-3 { background-color: saturate($borders, 30%); }
    }

我得到的错误是：

Invalid CSS after "         &": expected "{", was "_1 { background..."
"_1" may only be used at the beginning of a compound selector.

我可以手动将css编码为.tag-1，.tag-2和.tag-3，但这应该可行。我错过了什么？

我正在绞尽脑汁，因为我看不出语法有什么问题。任何帮助将不胜感激。

Answer 1

它应该在SASS 3.3中工作。

但是，我质疑像这样动态构建类名。你可能最好为背景颜色使用单独的类：

&.bg1 { background-color: saturate($borders, 10%); }
&.bg2 { background-color: saturate($borders, 20%); }
&.bg3 { background-color: saturate($borders, 30%); }

这会为你的HTML增加一些更好的语义，所以阅读它的人可以弄清楚发生了什么：

<div class="tag bg2">

SASS复合选择器导致错误

1 个答案: