Sass错误：选择器组不得被扩展。

Question

当我试图将我的SCSS文件编译成CSS时，出现了错误。错误信息为："选择器组不能被扩展"，指的是这一行：@extend .btn, .btn-link;。

注意：我正在导入Bootstrap以在我的主SCSS文件中使用。

完整代码：

button {
    @extend .btn, .btn-link;
    background-color: $lf-green;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    text-transform: uppercase;

    &:hover {
        background: rgba(5,97,43,0.9);
        color: #fff;
        text-decoration: none;
    }
}

我做错了什么？

谢谢！

更新：

为了后世留存：我无法完成这个操作，因为我是通过node-sass使用lib-sass，它与当前版本的sass不兼容 https://github.com/andrew/node-sass#reporting-sass-compilation-and-syntax-issues。

- Patrick Beeson

---

其实不是很清楚，这就是我发帖问问题的原因。如果您能提供相关文档的链接，那会更有帮助。 - Patrick Beeson

文档只有一页，应该很容易自己找到它：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#multiple_extends - cimmanon

这并没有解释为什么它在 Sass 的一个实例（最新版本）中有效，而在另一个实例（同一版本）中无效。 - Patrick Beeson

Answer 1

我相信你不能用这种方式扩展多个选择器。

试试使用这个：

@extend .btn;
@extend .btn-link;

虽然这似乎有点重复，但在我的代码中很好用。

编辑：阅读SASS_REFERENCE时，我发现：

多个扩展也可以使用逗号分隔的选择器列表编写。例如，@extend .error, .attention与@extend .error; @extend.attention相同。

我在变更日志中发现，这种格式是在3.1.15版本中首次引入的，因此我想您正在使用比那个版本更旧的Sass。

我强烈建议您升级到最新版本，因为它具有许多出色的功能，只需确保您的代码不会因更新而破坏，尽管大多数不一致性都可以很容易地解决。

- pentzzsolt

---

奇怪的是，我正在使用Sass 3.3.4（Maptastic Maple）版本，它应该具备这种功能。但我不确定是否使用Yeoman web-app生成器（grunt-sass）会改变什么。 - Patrick Beeson

看起来我使用了libsass，这可能解释了一些奇怪的问题：https://github.com/andrew/node-sass#reporting-sass-compilation-and-syntax-issues - Patrick Beeson

这确实解释了问题。 - pentzzsolt

Answer 2

您不能扩展超过一个选择器。

- vbotio

---

这显然是不正确的（http://sass-lang.com/documentation/file.SASS_REFERENCE.html#multiple_extends）。 - Oliver