“&”在 LESS CSS 中有什么作用？答案

【问题标题】：What does "&" do in LESS CSS?“&”在 LESS CSS 中有什么作用？
【发布时间】：2012-12-22 08:33:27
【问题描述】：

想弄清楚& 在下面的代码中做了什么？

  .controls-container  {
        .flex-control-nav  {
            li a  {
                &.flex-active  {
                    filter: none;
                    background: @color_links!important;
                }
            }
        }
    }

我知道你可以做类似&:hover 的事情，但不熟悉紧跟其后的课程？

【问题讨论】：

标签： css css-selectors less

【解决方案1】：

我知道你可以做类似&:hover 的事情，但不熟悉紧跟其后的课程？

这里是same logic：将内部选择器链接到外部选择器表示的任何内容。像 :hover 这样的伪类和像 .flex-active 这样的类的行为与 & 相同。

将其编译为 CSS 将产生一个带有选择器的规则

.controls-container .flex-control-nav li a.flex-active

【讨论】：

所以我想问题是，你为什么不直接做li a .flex-active？
@Jared：li a.flex-activea 后面没有空格。如果没有&，则会插入空格（这就是LESS 中嵌套的工作方式），从而产生一个非常不同的选择器。
@Jared：除非那是一个错字并且该空间不应该在那里，在这种情况下......这取决于样式表。一般li a 可能还有其他样式，所以你必须在自己的规则中指定.flex-active。但是，如果代码与您的问题中给出的完全一样，没有其他属性，那么该选择器嵌套的 all 完全是多余的。
@BoltClock 只是想知道中间有/没有空格有什么区别？它叫什么？谢谢

【解决方案2】：

编译器会将“&”替换为当前的外部选择器

这使得可以为:hover、:active、:before 等或任何其他情况提供不同的样式。

在您的情况下，最内层的选择器在编译后在生成的 CSS 文件中将如下所示：

.controls-container .flex-control-nav li a.flex-active { ... }

【讨论】：

【解决方案3】：

& 将父嵌套结构附加到& 可能出现的位置。因此，正如其他人所指出的那样，将 & 放入您的示例中会采用 .controls-container .flex-control-nav li a 的完整嵌套字符串并替换代码中的 & 以（在这种情况下）导致 .flex-active 类为结合到a标签...

.controls-container .flex-control-nav li a.flex-active

...而不是a 标记的子...

.controls-container .flex-control-nav li a .flex-active

如果您只是将其视为选择器的“字符串替换”，它将帮助您进行可视化。例如这个（注意我把&放在哪里）......

.controls-container  {
    .flex-control-nav  {
        li a  {
            .flex-active & {
                filter: none;
                background: @color_links!important;
            }
        }
    }
}

...会产生这个选择器...

.flex-active .controls-container .flex-control-nav li a

...因为它会在.flex-active 类之后附加嵌套结构。

【讨论】：