How can I interpolate a string/fraction mixin variable in LESS?

Question

I'm trying to my grid system to LESS.

I'm using fractions as strings (there's a reason) and need to interpolate them in the calc() expression.

In Sass I can do this...

@mixin move($fraction: '1/1') {
  position: relative;
  left: calc(99.999999% * #{$fraction});
}

In LESS when I try this...

.move(@fraction: '1/1') {
  @_fraction: ~'@{fraction}';
  left: calc(99.999999% * @_fraction);
}

It ends up throwing a Cannot read property 'numerator' of undefined error.

Apparently LESS can tell it's a fraction but then it poops out.

Can any LESS pros enlighten me?

Answer 1

You need to escape multiplication, addition, division, and subtraction in LESS or it will try output the calculated result. When less sees * in your code, it is trying to multiply 99.999999% and @_fraction.

For example when LESS sees calc(5px + 5px); it will output left: calc(10px);. You can except it like this ~'calc(5px + 5px);'.

Try using this code.

.move(@fraction: '1/1') {
  @_fraction: ~'@{fraction}';
  left: calc(~'99.999999% *' @_fraction);
}