1

我正在使用以下代码：

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

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

4

1 回答 1

0

（所以不要留下这个没有答案，尽管它比我想要的更广泛）：

很可能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通常是痛苦的......所以在某些时候考虑是否可以将其关闭是合理的（不幸的是，这并不总是可能的，并且取决于您的项目使用的库，例如最近的 Bootstrap 版本要求它是例如）。

于 2015-07-13T18:15:39.340 回答