Allow for pseudo-classes to be used as mixins

[lencinhaus]

This would be particularly useful when importing an external less library that defines rules on pseudo-classes, an you want to mixin those rules in another class that will be applied to an element that doesn't support the pseudo-class.
See the following example to understand what I mean:

.class {
  rule: something;
  &:focus {
    color: red;
  }
}

.otherclass {
  .class:focus;
}

should compile to:

.class {
  rule: something;
}

.class:focus {
  color: red;
}

.otherclass {
  color: red;
}

I've happened to need this while working with Bootstrap 3: I was trying to mix in the rules from .form-element:focus into another class that I wanted to apply to a div, which doesn't support the :focus pseudo-class. So, I ended up manually copying all the rules from the bootstrap pseudo-class into my other class, which is a really poor solution in a less-based project.

[10xLaCroixDrinker]

👍

[seven-phases-max]

See #1048, #1395. The Extend feature gives the best fit for this task.

[SomMeri]

An example how to use extend to solve your problem with the extend keyword.

If you do this:

.class {
  rule: something;
  &:focus {
    color: red;
  }
}

.otherclass:extend(.class:focus) {
}

then less.js will add #b selector into all rulesets with #a a selector:

.class {
  rule: something;
}
.class:focus,
.otherclass {
  color: red;
}

I will close this as a duplicate, because the issue #1048 covers the same problem. If you think that extend does not solve your problem, feel free to make your case there. The feature is more likely to be added if we known about something that is not possible to achieve without it.

[lencinhaus]

Thank you for your answer.
I had already tried :extend before posting this, but I was getting a syntax error during compilation: it turns out that my problem was due to Meteor shipping with an old version of less (1.3.3) that doesn't support the :extend clause. I'll ask them to bump their less version to 1.4+.
Thanks again!