Less 不计算算术表达式

Question

我正在使用这段代码：

.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);
}

编译正常，但是当我检查 Chrome 中的代码时，它说 @result 不是数字 (NaN%)。

P.S：如果在 http://lesstester.com/ 中尝试此代码，它工作正常，所以我有点搞砸了

Answer 1

（所以不要留下这个 w/o 的答案，尽管它比我希望的要宽泛一点）：

很可能 lesstester.com 和您的项目有不同的 --strict-math 设置（lesstester：off（默认），在您的项目中是 on）。

为了使您的代码可以使用任一设置进行编译，请始终在算术表达式周围添加括号，即：

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

（在带有 --strict-math=on 的代码段中，该语句将生成值列表而不是单个值，因此它的百分比为 returns NaN。）

此外，代码片段中的其他语句也需要括号（如果使用 --strict-math=on 编译）。例如

translateY(@result * -1);

应该是

translateY((@result * -1));

否则会导致 CSS 无效 transform: translateY(180deg * -1);。

是：

实际上 --strict-math=on 通常是 pain in the ass...项目使用，例如最近的 Bootstrap 版本要求它打开）。

Less 不计算算术表达式

Less does not compute arithmetic expressions

css

less

less-mixins