LESS是否具有“扩展”功能?


93

SASS具有一项称为的功能@extend,该功能允许选择器继承另一个选择器的属性,但无需复制属性(如mixins)。

LESS是否也具有此功能?


为了澄清起见,其他问题引用并没有提出相同的问题。这个问题很简单:“ LESS是否具有扩展功能?”。另一个问题是提出一些需要更多有关样式决策的思考的问题。
jonschlinkert

...添加到我的最后评论中,另一个问题包括“编码样式”标签,该标签进一步支持了我的观点。
jonschlinkert

Answers:


156

是的,Less.js推出extendV1.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;
}

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

嵌套选择器.selector1selector2

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

15
“ LESS的语法比传统的CSS更“忠实”,而不是@extendSASS和Stylus实现的at-rule()语法,后者通常保留用于在浏览器中向CSS解析器提供指令或指令。<-这到底意味着什么?闻起来像行销一样。
cimmanon


2
@cimmanon我想你是对的,我并不是说听起来像那样。但是,人们对Less的语法存在很多争议,这似乎是因为人们希望Less会使用与SASS相同的语法。但是在CSS中,伪选择器用于模式匹配规则,以确定哪些样式规则适用于文档树中的元素,而规则则用于“高级”指令(如我所述)。因此,也许我应该编辑答案以提供详细信息?还是另一个问题:“为什么LESS为什么选择伪选择器语法?”
jonschlinkert 2013年

4
您应该在线上真正地更新较少的文档,但我看不到有关:extend()的任何信息,因此早点知道就很好了
Joshua Bambrick

2
该文档以及代码均由社区维护。这些建议对于实际回购来说将是很棒的,并且总是欢迎请求请求;-)
jonschlinkert 2013年

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.