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）。

为了使你的代码可以与任何一个设置一起编写，总是在算术表达式周围添加parens，即：

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

（在--strict-math=on的代码段中，该语句将生成一个值列表而不是一个值，因此百分比会返回NaN。）

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

translateY(@result * -1);

应该是

translateY((@result * -1));

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

是：

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

Less不计算算术表达式

1 个答案: