LESS 有“扩展”功能吗？答案

【问题标题】：Does LESS have an "extend" feature?LESS 有“扩展”功能吗？
【发布时间】：2013-03-06 02:10:16
【问题描述】：

SASS 有一个名为@extend 的功能，它允许选择器继承另一个选择器的属性，但无需复制属性（如 mixins）。

LESS也有这个功能吗？

【问题讨论】：

【解决方案1】：

是的，Less.js 在v1.4.0 中引入了extend。

:extend()

LESS 实现了伪类语法，而不是实现 SASS 和 Stylus 使用的 at-rule (@extend) 语法，这使 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 的语法比 SASS 和 Stylus 实现的 at-rule (@extend) 语法对传统 CSS 更“忠实”，后者通常保留用于向 CSS 解析器提供指令或指令浏览器。”
让我们continue this discussion in chat
@cimmanon 我想你是对的，我不是故意的。但是关于 Less 的语法存在很多争议，似乎是因为人们期望 Less 使用与 SASS 相同的语法。但是在 CSS 中，伪选择器用于模式匹配规则以确定哪些样式规则适用于文档树中的元素，而 at-rules 用于“更高级别”的指令（正如我所提到的）。所以也许我应该编辑答案以提供那个细节？或者这是另一个问题：“为什么 LESS 选择伪选择器语法？”
你真的应该在线更新 less 文档，我看不到任何关于 :extend() 的信息，如果早点知道就好了
文档和代码一样由社区维护。在实际的 repo 中提出这些建议会很棒，并且总是欢迎请求请求 ;-)

【解决方案2】：

在 Less 框架中扩展函数的简单方法

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

输出

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

【讨论】：

【解决方案3】：

Less 允许我们做 :extend(.class) 或 :extend(#id)

【讨论】：