CSS LESS 有“扩展”功能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15464982/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does LESS have an "extend" feature?
提问by jonschlinkert
SASS has a feature called @extendwhich allows a selector to inherit the properties of another selector, but without copying the properties (like mixins).
SASS 有一个功能叫做@extend允许选择器继承另一个选择器的属性，但不复制属性（如混合）。
Does LESS have this feature as well?
LESS 也有这个功能吗？
回答by jonschlinkert
Yes, Less.js introduced extendin v1.4.0.
:extend()
Rather than implementing the at-rule (@extend) syntax used by SASS and Stylus, LESS implemented the pseudo-class syntax, which gives LESS's implementation the flexibility to be applied either directly to a selector itself, or inside a statement. So both of these will work:
@extendLESS 没有实现 SASS 和 Stylus 使用的 at-rule ( ) 语法，而是实现了伪类语法，这使 LESS 的实现可以灵活地直接应用于选择器本身或语句内部。所以这两个都可以工作：
.sidenav:extend(.nav) {...}
or
或者
.sidenav {
&:extend(.nav);
...
}
Additionally, you can use the alldirective to extend "nested" classes as well:
此外，您还可以使用该all指令来扩展“嵌套”类：
.sidenav:extend(.nav all){};
And you can add a comma-separated list of classes you wish to extend:
您可以添加一个以逗号分隔的要扩展的类列表：
.global-nav {
&:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
height: 70px;
}
When extending nested selectors you should notice the differences:
在扩展嵌套选择器时，您应该注意到不同之处：
nested selectors .selector1and selector2:
嵌套选择器.selector1和selector2：
.selector1 {
property1: a;
.selector2 {
property2: b;
}
}
Now .selector3:extend(.selector1 .selector2){};outputs:
现在.selector3:extend(.selector1 .selector2){};输出：
.selector1 {
property1: a;
}
.selector1 .selector2,
.selector3 {
property2: b;
}
, .selector3:extend(.selector1 all){};outputs:
，.selector3:extend(.selector1 all){};输出：
.selector1,
.selector3 {
property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
property2: b;
}
,.selector3:extend(.selector2){};outputs
,.selector3:extend(.selector2){};输出
.selector1 {
property1: a;
}
.selector1 .selector2 {
property2: b;
}
and finally .selector3:extend(.selector2 all){};:
最后.selector3:extend(.selector2 all){};：
.selector1 {
property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
property2: b;
}
回答by Spushika Mulakala
Easy way to extend a function in Less framework
在 Less 框架中扩展函数的简单方法
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
.sibling-1();
}
Output
输出
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
color: red
}
