SASS具有一个称为的功能@extend,该功能允许选择器继承另一个选择器的属性,但不复制属性(如mixins)。
@extend
LESS是否也具有此功能?
是的,Less.js推出extend的V1.4.0。
extend
:extend()
@extendLESS没有实现SASS和Stylus使用的at- rule()语法,而是实现了伪类语法,这为LESS的实现提供了灵活性,使其可以直接应用于选择器本身或在语句内部。因此,这两个都将起作用:
.sidenav:extend(.nav) {...}
要么
.sidenav { &:extend(.nav); ... }
此外,您还可以使用all指令扩展“嵌套”类:
all
.sidenav:extend(.nav all){};
您可以添加以逗号分隔的要扩展的类列表:
.global-nav { &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse); height: 70px; }
扩展嵌套选择器时,您应该注意到不同之处:
嵌套选择器.selector1和selector2:
.selector1
selector2
.selector1 { property1: a; .selector2 { property2: b; } }
现在.selector3:extend(.selector1 .selector2){};输出:
.selector3:extend(.selector1 .selector2){};
.selector1 { property1: a; } .selector1 .selector2, .selector3 { property2: b; }
,.selector3:extend(.selector1 all){};输出:
.selector3:extend(.selector1 all){};
.selector1, .selector3 { property1: a; } .selector1 .selector2, .selector3 .selector2 { property2: b; }
,.selector3:extend(.selector2){};输出
.selector3:extend(.selector2){};
.selector1 { property1: a; } .selector1 .selector2 { property2: b; }
最后.selector3:extend(.selector2 all){};:
.selector3:extend(.selector2 all){};
.selector1 { property1: a; } .selector1 .selector2, .selector1 .selector3 { property2: b; }