css - LESS是否具有 “extend”功能？

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

LESS是否也具有此功能？

最佳答案

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

:extend()

LESS并未实现SASS和Stylus使用的规则(@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;
}

关于css - LESS是否具有 “extend”功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15464982/