calc() 无法使用变量 - SyntaxError: Operation on an invalid type

Question

我有以下 LESS 变量：

@dashboard-height: 90.5%;
@dashlet-header-height: 35px;
@dashboard-margin: 0px;
@dashlet-border: 1px;

我想计算以下类：

.generate-dashlet-classes(6);
.generate-dashlet-classes(@n, @i: 1) when (@i =< @n) {
  &.dashlet-@{i} .dashlet-content {
    height: round((calc(@dashboard-height - (@i * (@dashlet-header-height + @dashboard-margin + @dashlet-border)))) / @i, 6);
  }
  .generate-dashlet-classes-times(@i);
  .generate-dashlet-classes(@n, (@i + 1));
}

.generate-dashlet-classes-times(@i, @times:1) when (@times < @i) {
  &.dashlet-@{times}-x-@{i} .dashlet-content {
    @dashletContainerHeight: (@dashlet-header-height + @dashboard-margin + @dashlet-border);
    height: round(((calc(@dashboard-height - (@i * @dashletContainerHeight))) / @i * @times) + (@dashletContainerHeight * (@times - 1)), 6);
  }
  .generate-dashlet-classes-times(@i, (@times + 1));
}

现在编译器抛出以下错误：

>> SyntaxError: Operation on an invalid type in app/styles/less/main.less on line 338, column 5:
>> 337 
>> 338     .generate-dashlet-classes(6);
>> 339     .generate-dashlet-classes(@n, @i: 1) when (@i =< @n) {

如果 @dashboard-height 有一个 px 值并且不使用 calc() ，则不会有错误。但是当混合百分比和像素值时，我们必须使用 calc() ，不是吗？

Answer 1

LESS 将尝试计算所有未转义的内容，直到您使用严格的数学运算进行编译。换句话说：结果是(90.5% - (3 * (35px + 0px + 1px))) / 3什么？很少有人知道，我想这就是对无效类型的操作试图告诉我们的。

打开 ( lessc -sm=on myfile.less myfile.css)严格数学模式将立即解决您的问题。但它具有不需要的副作用，即其他 less 文件中的所有其他计算也不会得到处理（只会处理不必要括号内的数学运算）。所以这可能不是一个选项，因为您可能不得不重构现有的代码库。

逃跑一般是这样的width: ~"calc(100% - 20px)";。这有点棘手，因为我们不想也转义 calc 函数中的变量。一种实现此目的的方法来插入变量：
height: ~"calc(@{dashboard-height} - (@{i} * (@{dashlet-header-height} + @{dashboard-margin} + @{dashlet-border})))" / @i;
这将导致例如 height: calc(90.5% - (2 * (35px + 0px + 1px))) / 2. 乍一看，这比编译错误要好，但它是无效的 CSS。

幸运的是，我们只能转义一些运算符（本例中的减号）
height: calc(@dashboard-height ~"-" (@i * (@dashlet-header-height + @dashboard-margin + @dashlet-border))); ，这将导致例如height: calc(90.5% - 36px);

完成转义后，您将收到下一个错误，告诉您您使用的 LESS轮函数不起作用。该函数需要一个浮点数作为参数，因此您不能将它与 CSS calc() 函数混淆。如果该值在编译时已知，则舍入仅在此处有意义。出于同样的原因，我/ @i在上面的计算中删除了，因为您不能将 calc() 除以数字。