Less does not compute arithmetic expressions

Question

I'm working in this code:

.vertical-align (@numoflines) {
  @first: (55 - (@numoflines * 5)) / 100;
  @result: percentage(@first);
  top: @result;
  -webkit-transform: translateY(@result * -1);
  -ms-transform: translateY(@result * -1);
  transform: translateY(@result * -1);
  position: relative;
}

.back {
  .vertical-align(1);
  text-align: center;
  transform: rotateY(180deg);
}

It compiles ok but when I inspect the code in Chrome it says that the @result is not a number (NaN%).

P.S: If a try this code in http://lesstester.com/ it works fine so i'm a bit messed up

Looks like http://lesstester.com/ and your project have different [`--strict-math`](http://lesscss.org/usage/#command-line-usage-strict-math) settings (lesstester: off (default) and in your project it's on). To make your code compilable with either setting always add parens around arithmetic expressions, i.e.: `@first: ((55 - @numoflines * 5) / 100);` (in your snippet with `--strict-math=on` the statement will result in a list of values instead of a single value hence `percentage` returns NaN for it.) — seven-phases-max, May 27 '15 at 20:19
Btw., also a good idea would be to learn how to get the same in a more clean way [w/o using `percentage`](http://stackoverflow.com/a/28058384/2712740) at all (it's sort of unrelated but curiously this way it would make the error more easily noticeable, as that incorrect list of values would appear directly in the inspector). — seven-phases-max, May 27 '15 at 20:25
Btw. (oooph, sorry, for chainging comments), also `translateY(@result * -1);` with `--strict-math=on` should be `translateY((@result * -1));` otherwise it results in incorrect CSS too... Yes, in fact `--strict-math=on` is usually [pain in the ass](https://github.com/less/less.js/issues/1872#issuecomment-35146481)... So at some point it could be reasonable to consider if you can turn it off (though it's not always possible, depending on the libraries your project uses, e.g. recent Bootstrap version require it to be on - unfortunately). — seven-phases-max, May 27 '15 at 20:32
@seven-phases-max You could write your comments as an answer, they solved my issue too. :) — Marlos, May 28 '15 at 13:28

seven-phases-max · Accepted Answer · 2015-07-13T18:30:39.480

(So to not leave this one w/o an answer, though it's a bit broader than I'd like it to be):

Most likely lesstester.com and your project have different --strict-math settings (lesstester: off (default) and in your project it's on).

To make your code compilable with either setting always add parens around arithmetic expressions, i.e.:

@first: ((55 - @numoflines * 5) / 100);

(in your snippet with --strict-math=on the statement will result in a list of values instead of a single value hence percentage returns NaN for it.)

Additionally, other statements in the snippet require parens too (if compiled with --strict-math=on). For example

translateY(@result * -1);

should be

translateY((@result * -1));

otherwise it results in invalid CSS like transform: translateY(180deg * -1); too.

Yes:

in fact --strict-math=on is usually pain in the ass... So at some point it could be reasonable to consider if you can turn it off (unfortunately it's not always possible and depends on the libraries your project uses, e.g. recent Bootstrap versions require it to be on for example).

Less does not compute arithmetic expressions

1 Answers1