Not able to extend Less mixin

Question

I would like to have below CSS output using Less

.selected-values,
.selected-values a {
    background-color: #505050;
    color: #fff;
}

.selected-values {
    display: block;
}

.selected-values a {
    text-decoration: none;
}

So far i have thought of below Less syntax, but it is not working.

.selected-dropdown-values() {
    background-color: #505050;
    color: #fff;
}

.selected-values:extend(.selected-dropdown-values) {
    display: block;
}

.selected-values a:extend(.selected-dropdown-values) {
    text-decoration: none;
}

I am not able to apply any extend logic to generate this syntax. I might be missing something or i am unaware about how to do it properly in Less. Also, I do not want .selected-dropdown-values mixin to output in CSS.

Currently you cannot extend mixins. You would have to remove the `()` in the first rule. Or if you don't want the `.selected-dropdown-values` to come in the output, then you may have to put those properties to the base class itself. — Harry, Sep 05 '14 at 06:03
@Archana sorry, but i am not aware about any LESS fiddle. If you can point me to someplace like that, it would be awesome and i can setup a LESS fiddle. — khagesh, Sep 05 '14 at 06:29
@Harry, can you please show me some example of base class. I would be happy to know more about it. — khagesh, Sep 05 '14 at 06:31
@khagesh: As far as I am aware JSfiddle doesn't support Less (unless included as an external resource). CodePen and CSSDeck does provide Less support, but for this particular problem I don't think demo is required. — Harry, Sep 05 '14 at 06:31
@khagesh: Sure can, but just one question before that. Are you trying to make the `display:block` apply only for `.selected-values` and not for `.selected-values a`? If yes, that might be a bit tricky. — Harry, Sep 05 '14 at 06:32
@Harry: yes, boss. You are absolutely correct. I have other properties as well that i will add in later, but i would definitely like to have this kind of structure in CSS. Thank you for your time . :) — khagesh, Sep 05 '14 at 06:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60666/discussion-between-harry-and-khagesh). — Harry, Sep 05 '14 at 06:40
Speaking of JSfiddle, it does support Less with just a little trick: follow the [white rabbit](http://jsfiddle.net/t2xe9/) (there's newer version [here](http://jsfiddle.net/seven_phases_max/hb2rsm2x/) - but I did not yet test it deeply). — seven-phases-max, Sep 05 '14 at 07:39

score 2 · Accepted Answer · answered Sep 05 '14 at 07:03

As mentioned in comments and discussed in the chat, Less currently does not support extending of mixins (there is a request and it might get addressed in v2.0.0 or later). (Note: To be more precise with wordings, extending of mixins which are not output in CSS is not supported.)

So, the best way forward would be to do the below:

Less:

.selected-dropdown-values { // just remove the braces
    background-color: #505050;
    color: #fff;
}

Just remove the braces from the .selected-dropdown-values rule. Ofcourse this would cause that rule also to be present in the CSS output but given that we are using extend, it would mean only one extra line in CSS output.

Output:

.selected-dropdown-values,
.selected-values,
.selected-values a {
    background-color: #505050;
    color: #fff;
}

Thank @Harry, i guess i would have to compromise on that extra line. :) — khagesh, Sep 05 '14 at 07:16

Not able to extend Less mixin

1 Answers1