LESS具有“延伸”特征？ [英] Does LESS have an "extend" feature?

问题描述

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

SASS has a feature called @extend which allows a selector to inherit the properties of another selector, but without copying the properties (like mixins).

是否还有此功能？

推荐答案

Less.js在 extend ：//github.com/cloudhead/less.js/blob/master/CHANGELOG.md> v1.4.0 。

Yes, Less.js introduced extend in v1.4.0.

:extend()

而不是实现at- > @extend ）SESS和Stylus使用的语法，LESS实现了伪类语法，这使LESS的实现可以灵活地直接应用于选择器本身或语句。所以这两个都将工作：

Rather than implementing the at-rule (@extend) syntax used by SASS and Stylus, LESS implemented the pseudo-class syntax, which gives LESS's implementation the flexibility to be applied either directly to a selector itself, or inside a statement. So both of these will work:

.sidenav:extend(.nav) {...}

或

.sidenav {
    &:extend(.nav);
    ...
}

此外，您可以使用 all 指令扩展嵌套类：

Additionally, you can use the all directive to extend "nested" classes as well:

.sidenav:extend(.nav all){};

您可以添加以逗号分隔的类别列表：

And you can add a comma-separated list of classes you wish to extend:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

扩展嵌套选择器时，应注意以下区别：

When extending nested selectors you should notice the differences:

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

这篇关于LESS具有“延伸”特征？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！