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

Question

我正在将一些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），那么问题是什么，我该如何解决呢？ / p>

Answer 1

在Sass中&仅适用于子/父/邻近选择器（空格，>，+，~，......如果忽略它，在前面，或者将父母添加到另一个选择器之后）或者添加类（以.开头）， id （从{{1}开始） }）或伪选择器（以#开头）。

您想要的功能尚未实现，但计划用于v3.3。你可以读一点more here。

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

:

Answer 2

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

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

“[class * = - inverse”]“表示”如果类中包含'-inverse'，那么除了“.navbar”之外，它看起来像这样：.navbar [class * =“ - inverse “]这基本上就是你要做的”.navbar-inverse“。

希望它有所帮助。

Answer 3

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

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

希望它有所帮助。