少/是否可以扩展最近嵌套的祖先？

Question

是否可以期待这个CSS输出：

.a .b { color: green }
.a .c, .b { color: green }

来自这个LESS代码：

.a {
     .b {
        color: green;
       .c {
         &:extend(.b);
       }
     }
}

用一句话：我们可以扩展最近嵌套的祖先吗？

Answer 1

没有.b可以展开，因为:extend只会匹配完整的上下文选择器而.b不存在（只有.a .b存在）。因此:extend(.b)无效。

如果您使用:extend(.a .b)，将匹配某些内容，因为该选择器存在。这样：

.a {
     .b {
        color: green;
       .c {
         &:extend(.a .b);
       }
     }
}

将导致：

.a .b,
.a .b .c {
  color: green;
}

但是您无法获得您建议的输出，因为这需要.c位于.a之下而不是.b之下。有了这个：

.a {
     .b {
        color: green;
     }
    .c {
         &:extend(.a .b);
     }
}

您将获得以下结果，该结果更接近您的预期：

.a .b,
.a .c {
  color: green;
}

要获得您期望的结果，您只需添加它（在顶层）：

.b:extend(.a .b){}