当额外的选择器附加到父选择器时，Less CSS :extend() 不起作用

Question

我想知道为什么这样做有效

&:extend(.test all);

但是

&.a_class:extend(.test all);

不起作用？

Answer 1

您不能使用 & 后跟 class，因为 & 代表当前选择器父级。
你需要试试

.a_class {
    &:extend(.test all);
}

Answer 2

问题中给出的两种扩展模式之间存在主要区别，这就是为什么一个可以工作而另一个不能工作的原因。

第一种方法（使用父选择器 (&) 扩展）通常通过将其放置在另一个选择器块中来使用，例如：

.test{
  a:a
}   
#dummy{
  &:extend(.test all);
}

这称为 Extend inside Ruleset，这通常不需要行尾的花括号 {}。事实上，对于这种方法，只有在提供大括号时才会抛出错误。

第二个方法被称为Extend attached to a selector，因为这里通过附加一个额外的class到父选择器来创建一个新的选择器，为此最后强制要求花括号。否则会抛出编译错误。

包含如下代码片段中的大括号会导致代码正确编译：

.test{
  a:a
}

#dummy{
  &.a_class:extend(.test all){};
}

在我看来，第二种方法而不是第一种方法需要大括号，因为没有大括号，第二种方法通常不是我们在 CSS 中编写规则的方式 - 每个选择器都必须有一个主体({}) 来包含它的规则。第一个选择器已经有了它的主体，因为扩展本身就放在它里面。

Less CSS :extend() doesn't work when an extra selector is attached to parent selector