使用`>`选择直属子级时，我应该使用`＆`吗？

Question

虽然写作较少，但我注意到以下两个摘要：

A。

.parent-el {
   & > .direct-child { ... }
}

B。

.parent-el {
   > .direct-child { ... }
}

将产生完全相同的css：

.parent-el > .direct-child {
   ...
}

我有几个问题：

• A 和 B 之间是否有区别？
• 这是故意设计的吗？
• 我应该使用哪个，为什么？

Answer 1

A和B之间有什么区别吗？

编译后的CSS不会有任何区别。 LESS中的&被已编译CSS中的外部选择器替换。因此， A 与执行操作实际上是相同的：

.parent-el {
    .parent-el > .direct-child { ... }
}

这当然是多余的，并且一开始就没有使用LESS的目的。

这是故意设计的吗？

实际上&未被使用，因为我相信您的示例中打算使用它。在LESS中使用&的一个好例子是这样的：

.parent-el {
    // define .parent-el styles
    &__child { 
        // define .parent-el__child styles
    }
}

在上面的示例中，&允许您缩短.parent-el__child的声明。

我应该使用哪个，为什么？

您应该使用 B 。在这种情况下，使用&是多余且不必要的。

Answer 2

“＆”的使用是可选的，当您将选择器插入另一个选择器时，就隐含了意图是从“父”开始。

尽管当我们不使用“＆”时我得到的代码更少，但我更喜欢使用它，因为代码更简洁