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,它不与通过传统方式https://github.com/andrew/node提供的当前sass版本相匹配-sass#reporting-sass-compilation-and-syntax-issues.

Answer 1

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

试试这个:

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

虽然这似乎有点重复,但在我的代码中工作正常.

编辑:在阅读SASS_REFERENCE时,我发现:

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

我确实在更新日志中发现了这种格式最初是在3.1.15中引入的,所以我想你使用的是旧版本的Sass.

我强烈建议您升级到最新版本,因为它有很多很棒的功能,只要确保您的代码不会被更新破坏,尽管大多数不一致都可以很容易地解决.