extend like sass

[Most]

less 1.4.0 converts:

ul.inline li { display: inline-block; }
nav ul { &:extend(.inline); }

to:

ul.inline li, ulnav ul li { display: inline-block; } 

Notice ulnav ul li selector.
Similar code in sass 3.2.1:

ul.inline li { display: inline-block; }
nav ul { @extend .inline; }

produces

ul.inline li, nav ul li { display: inline-block; }

[lukeapage]

just read http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

the selector merging appears to me quite un-intuitive.. in this example it produces cool output.. does it always?

Not sure if it should make 1.4.0 in the same sass way...

[matthew-dean]

SASS's extend is WAAAY to greedy. This (from the SASS documentation) is terrifying to me:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

// is compiled to:

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

Why you would ever want extending a partial class which then injects that selector into every instance where that class appears is beyond me. I mean, think about how many instances of "a" there are in a typical web app. That's just pure craziness. But to each their own, I guess.

So, for this:

ul.inline li { display: inline-block; }
nav ul { &:extend(.inline); }

I would expect LESS to do nothing. If you want to extend ul.inline, which is not necessarily the same as .inline, then refactor and specify.

ul.inline {
  li { display: inline-block; }
}
nav ul:extend(ul.inline);

[DesignByOnyx]

Agreed with @MatthewDL. If I wanted to extend ul.inline li, I should have to do something like nav ul:extend(ul.inline li) { }. The SASS-like extend-every-single-f-ing-instance is more appropriate for something like extend-all in my opinion (mentioned in other discussions). And since the extend feature is taking on this "modifier" approach such as :extend(.inline all/nested/only) - then we have an opportunity to make a modifier which would allow developers to have a SASS-like modifier.

[lukeapage]

Or not.. we can revisit this later, but it will need some strong usecases I
think.

[brianzimmerman]

Personally, I think that LESS should be a little more explicit. @MatthewDL's SASS example is pretty scary.

So,

ul.inline li { display: inline-block; }
nav ul { &:extend(.inline); }

should do nothing, but

ul.inline li { display: inline-block; }
nav ul { &:extend(ul.inline); }

should output

ul.inline li, nav ul li { display: inline-block; }

This, of course, assumes current functionality of :extend in the alpha grabbing 'all' matches.

[lukeapage]

I've been writing up less behaviour in the context of sass behaviour. I have come to believe they give this functionality because they do not support extending multiple elements, e.g. "ul.inline" so this was a way for them to provide the ability to extend in the above case when you would not otherwise be able to. less is different.