2

我正在将一些 LESS 转换为 SASS，由于这段代码，我目前遇到错误

.navbar{
    &-inverse {
        .brand:hover {
            color: black;
        }
    }
}

这段 LESS 导致我出现 SASS 错误：

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

在这两种语言中，&只是当前嵌套级别的父级的占位符（所以在这种情况下.navbar），那么问题是什么，我该如何解决呢？

4

3 回答 3

4

在 Sass&中，仅适用于子/父/相邻选择器（空格、、、、>... +，~如果在前面，则忽略它，或者在另一个选择器之后添加父级）或添加类（以 a 开头.），id（以 开头#）或伪选择器（以 开头:）。

您想要的功能尚未实现，但计划用于 v3.3。你可以在这里阅读更多内容。

例如，您可以设计一个将某些内容附加到选择器的 mixin。也许是这个方向的东西：

@mixin inverse($selector){
    #{$selector}-inverse {
        .brand:hover {
            color: black;
        }
    }
}

@include inverse(".navbar");
于 2013-07-23T12:02:44.690 回答
2

虽然这不是完美的答案，但我有一个您可能会考虑使用的解决方案。

.navbar {
    &[class*="-inverse"] {
        .brand:hover {
            color: black;
        }
    }
}

“[class*=-inverse”]”的意思是“如果类中有'-inverse'”，所以除了“.navbar”它看起来像这样：.navbar[class*="-inverse"]本质上就是你想要做的这个“.navbar-inverse”。

希望能帮助到你。

于 2013-07-28T00:59:41.690 回答
0

尽管问题已经过去了一段时间，但我发现了同样的问题。我的解决方案是将 SASS (3.2) 更新到最新版本 (3.3.3)。事实上，有一个未解决的问题暂时中止了对该功能的支持。

github上的问题链接： https ://github.com/nex3/sass/issues/286

希望能帮助到你。

于 2014-03-18T10:23:57.113 回答