LESS是否具有"扩展"功能？

Question

SASS有一个叫做的功能@extend,允许选择器继承另一个选择器的属性,但不复制属性(如mixins).

LESS也有这个功能吗？

Answer 1

是的,Less.js推出extend的V1.4.0.

:extend()

@extendLESS 不是实现SASS和Stylus使用的at-rule()语法,而是实现了伪类语法,它为LESS的实现提供了直接应用于选择器本身或语句内部的灵活性.所以这两个都有效:

.sidenav:extend(.nav) {...}

要么

.sidenav {
    &:extend(.nav);
    ...
}

此外,您还可以使用该all指令扩展"嵌套"类:

.sidenav:extend(.nav all){};

并且您可以添加要扩展的以逗号分隔的类列表:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

扩展嵌套选择器时,您应该注意到差异:

嵌套选择器.selector1和selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

现在.selector3:extend(.selector1 .selector2){};输出:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

,.selector3:extend(.selector1 all){};输出:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

,.selector3:extend(.selector2){};产出

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

最后.selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

"LESS的语法比传统的CSS更"忠实",而不是SASS和Stylus实现的at-rule(`@extend`)语法,它通常用于向浏览器中的CSS解析器发出指令或指令." < - 这应该是什么意思？闻起来像营销说话. (15认同)
你应该真正在线更新较少的文档,我看不到任何关于:extend()的信息,之前就知道了 (4认同)
@cimmanon我猜你是对的,我不是故意这样说的.但是关于Less的语法存在很多争议,似乎是因为人们期望Less使用与SASS相同的语法.但是在CSS中,pseuso-selectors用于模式匹配规则以确定哪些样式规则适用于文档树中的元素,而at-rules用于"更高级别"指令(如我所提到的).那么也许我应该编辑答案来提供这些细节？或者是另一个问题:"为什么LESS选择伪选择器语法？" (2认同)
与代码一样,文档是社区维护的.对于实际的回购,这些建议会很棒,并且总是欢迎拉请求;-) (2认同)

Answer 2

在Less框架中扩展功能的简便方法

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

输出量

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}