CODEWITHSUNDEEP
lessinterpolationmixins
Joshua Soileau
Joshua Soileau

Reputation: 3015

LESS - Interpolation - Using dynamically generated class name AS A MIXIN itself?

Let's say you want a mixin that accepts a parameter, and uses that parameter to call a different mixin.

.text-right {
  text-align: right
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}


// mixin to call one of the above selectors
.text-align( @direction ) {
  .text-@{direction};
}

body {
  .text-align(right);
}

// Unrecognized input on this line
//   .text-@{direction};

Trying this results in an Unrecognized Input on the line you try to interpolate the parameter.

Here's a codepen I made for it.

How can I accept a parameter, and then use that parameter to call a different mixin (where the parameter name is a part of the name of the mixin)??

Upvotes: 2

Views: 197

Answers (1)

Stefan Dragnev
Stefan Dragnev

Reputation: 14493

You can't. Not like this. The relevant line in the LESS source code is in parser.js, mixin.call- the parser of a mixin call:

e = parserInput.$re(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)

That is, a valid mixin call may only be named as a valid CSS .class or #id identifier. Everything else is unparseable, and doesn't even get to the variable interpolation stage.

If we relax the requirements of the solution, there is a way. Now, we want a function that takes a part of a class name, and calls a mixin with that class name. If can live with that not being totally dynamic, we can simply implement that function with a number of when clauses:

.text-align( @direction ) when (@direction=left) {
  .text-left;
}
.text-align( @direction ) when (@direction=center) {
  .text-center;
}
.text-align( @direction ) when (@direction=right) {
  .text-right;
}

Upvotes: 1

Related Questions