css - 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

(所以不要留下这个没有答案的问题，尽管它比我希望的要宽泛一点):

很可能 lesstester.com 和您的元素有不同的 --strict-math设置(lesstester:off(默认)，在您的元素中它是on)。

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

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

(在带有 --strict-math=on 的代码段中，该语句将生成值列表而不是单个值，因此百分比返回 NaN。 )

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

translateY(@result * -1);

应该是

translateY((@result * -1));

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

是的:

实际上 --strict-math=on 通常是 pain in the ass ...所以在某些时候考虑是否可以关闭它可能是合理的(不幸的是它并不总是可能并且取决于您的元素使用的库，例如最近的 Bootstrap 版本要求它打开)。