SASS有一个名为@extend
的功能,它允许选择器继承另一个选择器的属性,但不复制属性(如mixins)。
LESS也有这个功能吗?
答案 0 :(得分:145)
: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;
}
答案 1 :(得分:1)
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
.sibling-1();
}
输出
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
color: red
}