LESS 和 SASS 编译器中的 & 符号冲突答案

【问题标题】：Ampersand conflict in LESS and SASS compilersLESS 和 SASS 编译器中的 & 符号冲突
【发布时间】：2013-07-22 08:43:47
【问题描述】：

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

【问题讨论】：

标签： sass less ampersand

【解决方案1】：

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

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

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

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

@include inverse(".navbar");

【讨论】：

【解决方案2】：

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

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

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

希望对你有帮助。

【讨论】：

【解决方案3】：

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

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

希望对您有所帮助。

【讨论】：