use variables on mixin or extend in Less.js

Question

Using variable on mixin or extend in Less.js as follow will throw error.

@bar : bar;

.@{bar} {
  background: yellow;
}

// ParseError: Missing closing ')'
.foo {
  .@{bar}(); 
}

// Not work
.jam {
  &:extend(.@{bar});
}

Has Less.js a proper syntax to call mixin with variables?

In short, no. The corresponding feature for `extend` is proposed at [#1485](https://github.com/less/less.js/issues/1485). — seven-phases-max, Jan 18 '16 at 12:10
As for mixins - these days it's not really recommended to re-use existing CSS rulesets as mixins for various reasons, so this feature is not planned (though it will be probably supported indirectly by other additions). Thus for your use-case you're probably better to start with something [like this](http://less2css.org/#%7B%22less%22%3A%22%40bar%20%3A%20bar%3B%5Cn%5Cn.style-to-reuse()%20%7B%5Cn%20%20%20%20background%3A%20yellow%3B%5Cn%7D%5Cn%5Cn.%40%7Bbar%7D%20%7B%5Cn%20%20%20%20.style-to-reuse()%3B%5Cn%7D%5Cn%5Cn.foo%20%7B%5Cn%20%20%20%20.style-to-reuse()%3B%5Cn%7D%5Cn%22%7D). — seven-phases-max, Jan 18 '16 at 12:10

score 3 · Accepted Answer · edited May 23 '17 at 11:54

3

You are trying to call a mixin using selector interpolation, which is not possible.

As for extend, Less documentation states it clearly:

Extend is NOT able to match selectors with variables. If selector contains variable, extend will ignore it.

edited May 23 '17 at 11:54

Community

answered Jan 18 '16 at 12:17

chromice

1 Answers1