LESS是否拥有“extend”功能？

Question

SASS有一个称为@extend的功能，它允许选择器继承另一个选择器的属性，但不复制属性（就像mixin一样）。

LESS也有这个功能吗？

- jonschlinkert

---

澄清一下，另一个问题并没有问同样的事情。这个问题很简单：“LESS有扩展功能吗？”另一个问题涉及到需要更多关于样式决策方面的思考。 - jonschlinkert

补充一下我的上一个评论，另一个问题包含“编码风格”标签，这进一步支持了我的观点。 - jonschlinkert

Answer 1

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

:extend()

LESS没有采用SASS和Stylus使用的at-rule（@extend）语法，而是采用了伪类语法，这使得LESS的实现可以直接应用于选择器本身或语句内部。因此这两种写法都可以：

```less .my-class:extend(.other-class) {...} ```

或者：

```less &:extend(.other-class) {...} ```

.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;
}

- jonschlinkert

---

LESS的语法比SASS和Stylus实现的@extend语法更符合传统CSS的特点，后者通常用于向浏览器中的CSS解析器提供指令或指导。 - cimmanon

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/26336/discussion-between-steveax-and-jonschlinkert - steveax

@cimmanon，我想你是对的，我不是那个意思。但是关于Less的语法存在很多争议，似乎是因为人们期望Less使用与SASS相同的语法。但在CSS中，伪选择器用于模式匹配规则，以确定哪些样式规则适用于文档树中的元素，而@规则用于“更高级别”的指令（如我所提到的）。那么也许我应该编辑答案提供这个细节？还是另一个问题：“为什么LESS选择了伪选择器语法？” - jonschlinkert

你应该真的更新在线文档，我找不到有关 :extend() 的任何内容，如果早些知道就更好了。 - Joshua Bambrick

文档和代码一样，由社区维护。这些建议在实际存储库上会很有用，欢迎提交拉取请求;-) - jonschlinkert

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
}

请参考https://codepen.io/sprushika/pen/MVZoGB/。

- Spushika Mulakala

Answer 3

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

- Sudharshan S