Css LESS是否有一个“；扩展；特征？

SASS有一个名为

@extend

的功能，它允许选择器继承另一个选择器的属性，但不复制属性（如mixin）

LESS是否也具有此功能？

是的，中引入了LESS.js

LESS没有实现SASS和Stylus使用的at规则（

@extend

）语法，而是实现了伪类语法，这为LESS的实现提供了直接应用于选择器本身或在语句内部的灵活性。因此，这两种方法都会起作用：

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

或

此外，还可以使用

all

指令扩展“嵌套”类：

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

您可以添加一个逗号分隔的类列表，以扩展：

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

扩展嵌套选择器时，您应该注意到不同之处：

嵌套选择器

.selector1

和

选择器2

：

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

现在

.selector3:extend（.selector1.selector2）{输出：

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

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

，
.selector3:extend（.selector1 all）{}输出：

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

.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的语法比SASS和Stylus实现的at规则（
@extend
）语法更“忠实”于传统CSS，后者通常用于在浏览器中向CSS解析器提供指令或指令。”让我们@cimmanon我想你是对的，我不是故意这样说的。但是对于Less的语法有很多争议，似乎是因为人们期望Less使用与SASS相同的语法。但在CSS中，pseuso选择器用于模式匹配规则，以确定哪些样式规则应用于文档树中的元素，而at规则用于“更高级别”的指令（如我所述）。也许我应该编辑答案来提供细节？或者这是另一个问题：“为什么LESS选择伪选择器语法？”您应该在线更新LESS文档，我看不到关于：extend（）的任何信息，最好早点知道文档（与代码一样）是由社区维护的。对于实际回购，这些建议非常有用，而且拉式请求总是受欢迎的；-）为了澄清，其他问题的参考文献并没有提出同样的问题。这个问题很简单：“LESS是否具有扩展功能？”。另一个问题是问一些关于造型决策需要更多思考的问题。。。。为了补充我的最后一条评论，另一个问题包括“编码风格”标签，它进一步支持了我的观点。
.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

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