LESS是否有"延伸"特征?

时间:2013-03-17 19:07:45

标签: css css3 sass less extend

SASS有一个名为@extend的功能,它允许选择器继承另一个选择器的属性,但不复制属性(如mixins)。

LESS也有这个功能吗?

2 个答案:

答案 0 :(得分:145)

是的,Less.js在extend中引入了v1.4.0

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

扩展嵌套选择器时,您应该注意到差异:

嵌套选择器.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;
}

答案 1 :(得分:1)

在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/