使用 `>` 选择直接子代时应该使用 `&` 吗？

Question

写得少的时候，注意到下面两段：

A.

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

B.

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

将产生完全相同的 css:

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

我有几个问题：

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

Answer 1

“&”的使用是可选的，当您在另一个选择器中插入选择器时，就隐含了意图是从您的 "parent".

开始

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

Answer 2

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。在这种情况下，使用 & 是多余且不必要的。