LESS CSS中的"&"做什么？

Question

试着找出&下面代码中的作用？

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

我知道你可以做类似的事情&:hover,但不熟悉在它之后立即上课吗？

Answer 1

我知道你可以做类似的事情&:hover,但不熟悉在它之后立即上课吗？

这里的逻辑是相同的:将内部选择器链接到外部选择器表示的任何内容.像类:hover和类这样的伪类.flex-active表现相同&.

将其编译为CSS将导致使用选择器的规则

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

Answer 2

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

这使得能够提供即不同的风格: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

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