LESS 有“扩展”功能吗？

Posted 2023-02-21

【中文标题】LESS 有“扩展”功能吗？

【英文标题】：Does LESS have an "extend" feature?

【发布时间】：2013-03-06 02:10:16

【问题描述】：

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

LESS也有这个功能吗？

【问题讨论】：

为了澄清，其他问题参考不问同样的事情。这个问题很简单：“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

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

【参考方案3】：

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