Add selector inheritance to less #102

Closed
lossendae opened this Issue May 10, 2011 · 11 comments

Comments

Projects
None yet
7 participants

It would be nice to have selector inheritance built in like SASS allow it:

.bordered {
border: 1px solid back;
}

menu a {

@extend .bordered;
}

.bordered, #menu a {
border: 1px solid back;
}

This already exists. Read the docs http://lesscss.org/ . You do this:

.bordered{ border: 1px solid black; }

#menu a {
.bordered;
}

It's not the same behaviour.

With Less if i do :

.test{
    border: 1px solid;
}
.test2{
    .test;
}

I end up with:

.test { border:1px solid; }
.test2 { border:1px solid; }

With inheritance in SASS if i do:

.test {
    border: 1px solid;
}
.test2 {
    @extend .test;
}

The output result is the following:

.test, .test2 {
    border: 1px solid;
}

The two properties end up concatened on a single line

@lossendae lossendae closed this May 20, 2011

@lossendae lossendae reopened this May 20, 2011

They are the same.

.test { border:1px solid; }
.test2 { border:1px solid; }

means the same in css as

.test, .test2 {
border: 1px solid;
}

Owner

leafo commented May 23, 2011

@fresheneesz check this out, this is the author of sass explaining the use for @extend: http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend

Also I'd like to add this. I think it is also in the process of being added to lessjs, so I'll see what syntax they use. (I think they are prepending another character to the block)

Ah I see how this is different. Interesting.

SunnyRed commented Oct 4, 2011

+1 here.

I would bigtime appreciate this syntax as I currently mixin a lot of gradients, roundCorners, text-shadows and the like. This leads to a lot of redundant definitions and therefore a much larger than necessary css-file.

Best Greeets

WillsB3 commented Oct 27, 2011

+1 - I'd love this too. I only just recently really understood the key use case for selector inheritance.

I use CSS grouping quite a bit for identical declarations w/ adjustments. Adding selector inheritance to LESS would make a huge difference in my workflow.

+1 this is a super-vital feature for creating CSS that is both efficient during development (LESS already covers that) AND efficient in the end result. It makes the stylesheets smaller overall which is good for bandwidth on both ends, a reason in and of itself.

It's also beneficial when viewing the code in DevTools/Firebug, as when you inspect an element you see all the selectors that a style affects, rather than just the single one you clicked on. A related benefit is that when selectors are stacked rather than having styles repeated, changing a style in DevTools/Firebug will show a live preview of how all affected selectors will change, rather than just the single one (i.e. you change "light grey" of a button but notice how the header also changes, because it shares the style).

For more reasons why efficiently stacking selectors is good check out this talk I gave about DRY CSS. Currently I have to recommend SASS because they allow cleaner output, but in every other way I like LESS better so this one missing feature is a bummer: http://simianuprising.com/2012/02/28/dry-css-slides-from-my-confoo-2012-talk/

Owner

leafo commented Jun 4, 2012

does lessjs have anything like this yet? It's hard to follow its progress because there are a lot of undocumented features.

Owner

leafo commented Aug 18, 2012

In case you are interested, I've implemented this feature fully in scssphp: http://leafo.net/scssphp/

I don't think it's been added to less yet, so until then we'll have to wait.

@leafo leafo closed this Aug 18, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment