Generated Classes Can't Be Extended

[dzoba]

I've got some Less to create a bunch of default padding classes. However, I can't use those classes in other CSS classes after they are generated.

An example input:

.layout(5px, small);
.layout(10px, large);

.layout(@n, @size) {
  .pad-@{size} {padding: @n}
}

.test {
    &:extend(.pad-small);
}

I would expect to see this as output:

.pad-small,
.test {
  padding: 5px;
}
.pad-large {
  padding: 10px;
}

However, this is what I'm getting:

.pad-small {
  padding: 5px;
}
.pad-large {
  padding: 10px;
}

This is unexpected behavior. As a work around, I tried not using extend, like this:

.layout(5px, small);
.layout(10px, large);

.layout(@n, @size) {
  .pad-@{size} {padding: @n}
}

.test {
    .pad-small;
}

However, the output I got was:

Name error: .pad-small is undefined
.test { .pad-small;}

I'd greatly appreciate any advice. Right now I'm going to have to generate the CSS with less, and then copy and paste the generated CSS into my less files, which is a pain because I'd rather be using Less in my files, not CSS!

[SomMeri]

Generated classes can not be extended and can not be used as mixins.

• Extend also generated classes issue is tracked here Extend dynamically-generated selectors less.js#1539 - feel free to add +1 if you want that feature.
• Use generated class as a mixin is tracked here Use Dynamically Generated Classes as Mixins less.js#1399 - unfortunately it is hard to correctly define what it should do.

I tried to come up with another solution:

.layout(@n, @size) {
  .pad-general(@padSize) when (@padSize=@size) {
    padding: @n
  }
}

.layout(5px, small);
.layout(10px, large);

.test-small {
    .pad-general(small);
}
.test-large {
    .pad-general(large);
}

but that one does not work due to this: less/less.js#1291 .

So, my question is, what are you trying to achieve? Maybe there is yet another possibility that would work.

[lukeapage]

written up
http://lesscss.org/features/#extend-feature-selector-interpolation-with-extend