css - “&”在 LESS CSS 中有什么作用？

Question

试图弄清楚&以下代码中的作用？

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

我知道你可以做类似的事情&:hover，但不熟悉在它之后显示一个类？

Answer 1

我知道你可以做类似的事情&:hover，但不熟悉在它之后显示一个类？

这里的逻辑相同：将内部选择器链接到外部选择器表示的任何内容。伪类 like:hover和 classes like.flex-active的行为与&.

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

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

Answer 2

编译器将用当前外部选择器替换“&”

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

在您的情况下，最里面的选择器在编译后在生成的 CSS 文件中看起来像这样：

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

Answer 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

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