Does LESS have an “extend” feature?

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?

Does Less have a feature to shorten input type selectors?

I have written this css: .form-group > input[type=text], .form-group > input[type=text]:hover, .form-group > input[type=text]:active, .form-group > input[type=password], .form-grou

Does Less have support for Custom Elements?

Does Less have any support for the Web Components Custom Elements spec? (http://w3c.github.io/webcomponents/spec/custom/ or more accessible http://www.x-tags.org/docs)

Does Xcode have code navigation feature?

Does Xcode have a code navigation feature? Like unix’s cscope type of tool which I can enter the name of a class and it will open the file for me? Or find out the caller of a particular method of a cl

Does Eclipse have “Syntax Aware Selection” feature?

Does Eclipse have Syntax aware selection, something similar to CMD + w in Intellij IDEA?

Does jqGrid have a row swap feature?

I wonder if jqGrid has a built in row swapping feature. It is sometime that I have looked for it on the internet, but no luck so far. But similar features are (and none can be used for row swaps wi

does ruby on rails have an Admin section generation feature like django?

does ruby on rails have an Admin section generation feature like django?

Does Highcharts have a “trend line” feature?

Basically, I’m trying to have Highcharts automatically draw a straight line going from the first data point to the last, so that I can see the overall trend more easily. I believe this is called a

Does CSS have a “start over” feature?

I’m using calendar_date_select (henceforth CDS) in a Rails application, and have a stupid question. When I embed the CDS component in the middle of an already-CSS-styled page, all manner of things go

Does FlashDevelop have a feature changing a value when I’m debugging?

Does FlashDevelop have a feature changing a value when I’m debugging? If so, how do i change a value? To explain more detail for the feature above, I want you to see the example of the same feature in

Joomla – less :extend in Gantry framework

I cannot properly :extend a class in Gantry framework. I’m trying to do: .mybox:extend(.box3) { /* Customization */ } but it’s not working. I’m wondering whether it could be a version-related less co

Answers

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;
}