什么是“＆amp;”做LESS CSS吗？

Question

试图找出以下代码中&的作用？

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

我知道你可以做&:hover这样的事情，但不熟悉在它之后立即上课？

Answer 1

  

我知道你可以做&:hover这样的事情，但不熟悉在它之后立即上课？

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

将其编译为CSS将导致带有选择器的规则

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

Answer 2

编译器将替换“＆amp;”使用当前外部选择器

这样可以为:hover，:active，:before等提供不同的样式，或者为您提供任何其他案例。

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

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

Answer 3

&将父级嵌套结构附加到可能出现&的位置。正如其他人所指出的那样，在示例中放置&会使用完整的嵌套字符串.controls-container .flex-control-nav li a并将代码中的&替换为（在这种情况下）导致.flex-active } class要 连接 到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之后追加嵌套结构。