100

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?

jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
  • For clarification, the other question references does NOT ask the same thing. This question is simple: "Does LESS have an extend feature?". The other question is asking something that requires much more thought regarding styling decisions. – jonschlinkert Mar 17 '13 at 20:42
  • ... to add to my last comment, the other question includes the "coding-style" tag which further supports my point. – jonschlinkert Mar 17 '13 at 20:44

3 Answers3

172

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;
}
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
  • 15
    "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. – cimmanon Mar 17 '13 at 19:20
  • 1
    let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/26336/discussion-between-steveax-and-jonschlinkert) – steveax Mar 17 '13 at 20:06
  • 2
    @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?" – jonschlinkert Mar 17 '13 at 20:31
  • @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](http://lesscss.org/) going to be updated with new docs and a new download? 1.3.3 is still up. Thanks! – chharvey Jun 13 '13 at 20:52
  • 4
    you should really update the less documentation online, I cannot see anything about :extend() and it would have been good to know earlier – Joshua Bambrick Jul 08 '13 at 18:26
  • 2
    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 ;-) – jonschlinkert Jul 08 '13 at 22:54
  • 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` – Joshua Bambrick Aug 01 '13 at 22:39
  • @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 – jonschlinkert Aug 02 '13 at 14:11
  • Less' syntax is *not* more faithful to CSS. In fact, Sass' `@extend` (and more) is a proposed addition to the CSS specification: https://tabatkins.github.io/specs/css-extend-rule – Steven Vachon Aug 18 '16 at 16:29
  • Shame it doesn't work, `.noButtonStyle();` works but `&:extend(.noButtonStyle);` does nothing in the same place – Dominic Mar 20 '18 at 10:54
  • 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 – nuander Dec 20 '19 at 15:41
7

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/

Spushika Mulakala
  • 126
  • 1
  • 3
0

Less allows us to do :extend(.class) or :extend(#id)

Sudharshan S
  • 89
  • 1
  • 8