Does LESS have an "extend" feature?

Question

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

Does LESS have this feature as well?

Solution 1

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

:extend()

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) {...}

or

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

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:

nested selectors .selector1 and selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

Now .selector3:extend(.selector1 .selector2){}; outputs:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, .selector3:extend(.selector1 all){}; outputs:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

,.selector3:extend(.selector2){}; outputs

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

and finally .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

Solution 2

Easy way to extend a function in Less framework

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

Output

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

Refer https://codepen.io/sprushika/pen/MVZoGB/

Comments

[cimmanon]

"LESS's syntax is more "faithful" to traditional CSS than the at-rule (@extend) syntax implemented by SASS and Stylus, which is typically reserved for giving instructions or directives to the CSS parser in the browser." <- what the heck is this supposed to mean? Smells like marketing speak.

[steveax]

let us continue this discussion in chat

[jonschlinkert]

@cimmanon I guess you're right, I didn't mean it to sound that way. But there is a lot of controversy about Less's syntax, seemingly because people expected Less to use the same syntax as SASS. But in CSS, pseuso-selectors are used for pattern matching rules to determine which style rules apply to elements in the document tree, whereas at-rules are used for "higher-level" directives (as I mentioned). So maybe I should edit the answer to provide that detail? Or is that another question: "Why did LESS choose the pseudo-selector syntax?"

[chharvey]

@jonschlinkert can you be more informational about the all directive? Like good examples of when to use it and when not to use it. Also, when is lesscss.org going to be updated with new docs and a new download? 1.3.3 is still up. Thanks!

[Joshua Bambrick]

you should really update the less documentation online, I cannot see anything about :extend() and it would have been good to know earlier

[jonschlinkert]

The documentation, as with the code, is community maintained. These kinds of suggestions would be great to have on the actual repo, and pull requests are always welcome ;-)

[Joshua Bambrick]

I am not sure about bug reports for less but this did not work for my selector h1,h1,h3 but it did work if I added spaces after the commas ie h1, h1, h3

[jonschlinkert]

@Josh'Bambi'Bambrick, it would be great if you could bring that up on the Less.js issues over on GitHub. that sounds like a bug. thanks

[Steven Vachon]

Less' syntax is not more faithful to CSS. In fact, Sass' @extend (and more) is a proposed addition to the CSS specification: tabatkins.github.io/specs/css-extend-rule

[Dominic]

Shame it doesn't work, .noButtonStyle(); works but &:extend(.noButtonStyle); does nothing in the same place

[nuander]

I found this only works when the classes are in the same css file. even importing another style sheet into the file won't work