css - LESS 有“扩展”功能吗？

Question

SASS 有一个称为@extend允许选择器继承另一个选择器的属性的功能，但无需复制属性（如 mixins）。

LESS也有这个功能吗？

Answer 1

是的，Less.jsextend在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;
}

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

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

Answer 2

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

Answer 3

Less 允许我们做 :extend(.class) 或 :extend(#id)