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. — seven-phases-max
– seven-phases-max, Commented Jan 18, 2016 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. — seven-phases-max
– seven-phases-max, Commented Jan 18, 2016 at 12:10

Community · Accepted Answer · 2017-05-23 11:54:24Z

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.

CommunityBot

11 silver badge

answered Jan 18, 2016 at 12:17

chromice

1421 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1