LESS和SASS编译器中的符号与冲突

我正在将一些较少的代码转换为SASS，并且由于这段代码，我当前收到了一个错误

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

这一点导致了我的SASS错误：

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

---

在这两种语言中，

&

只是当前嵌套级别的父级的占位符（因此在本例中，

.navbar

），那么问题是什么，我如何解决它呢？

在Sass中

&

仅适用于子级/父级/相邻选择器（空格，

，

+

，

~

，…如果它被忽略，如果在前面，或者在另一个选择器之后添加父级）或者添加类（以

开头）、id（以

开头）或伪选择器（以

开头）：

）

您想要的功能尚未实现，但计划在v3.3中实现。您可以稍微阅读一下

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

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

@include inverse(".navbar");

---

虽然不是完全完美的答案，但我有一个你可以考虑使用的解决方案。

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

“[class*=-inverse”]”表示“如果类中有“-inverse”，那么除了“.navbar”之外，它看起来是这样的：.navbar[class*=-inverse”]，本质上就是这个“.navbar inverse”，这就是您试图做的

---

希望能有所帮助。

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

链接到github上的问题：

希望能有帮助