什么是&&引用；你用更少的CSS吗？

试图找出

&

在以下代码中的作用

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

我知道您可以执行类似于

&:hover

的操作，但不熟悉在类之后立即显示类

我知道您可以执行类似于

&:hover

的操作，但不熟悉在类之后立即显示类

这就是这里：将内部选择器链接到由外部选择器表示的任何内容。像

：hover

这样的伪类和像

.flex active

这样的类在

&

中的行为相同

将其编译为CSS将生成带有选择器的规则

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

编译器将用当前外部选择器替换“&” 这使得为以下情况提供不同的样式成为可能：悬停，

：活动

，

：之前

等，或您的任何其他情况

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

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

---

&

在可能出现

&

的位置追加父嵌套结构。因此，正如其他人所注意到的，将

&

放在示例中会采用

.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

…而不是

a

标记的子项

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

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

如果您只是将其视为选择器的“字符串替换”，它将帮助您可视化。例如，这个（注意我把

和
放在哪里了）

…将生成此选择器

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

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