paulhhowells
paulhhowells

Reputation: 321

How may I pass a variable to :extend when using Less?

I would like to use a variable within a Less mixin that when passed to :extend has the same result as if I had instead used :extend with a class name string.

In the example below I have commented out a line that produces the CSS output I want by using :extend with a string.

But how can I do this with the @class-name variable instead?

.class-to-be-extended {display: block;} 

.my-mixin (@class-name) {
  @class-string: ~".@{class-name}";

  .my-extra-class {

    // &:extend(.class-to-be-extended); // works

    &:extend(@{class-string}); // doesn't work, but no errors
  } 
}

.my-mixin(class-to-be-extended);

The CSS output I would like is:

.class-to-be-extended,
.my-extra-class {
  display: block;
}

At the time of writing this I'm using the latest version I can find which is Less 1.4.2

Upvotes: 0

Views: 717

Answers (1)

paulhhowells
paulhhowells

Reputation: 321

This is not possible with Less version 1.4.2. (Thanks to Jon Schlinkert for letting me know via Twitter).

A feature request has been submitted to https://github.com/less/less.js/issues

Upvotes: 1

Related Questions