计算（）与变量不可能的 - 语法错误：操作上的无效类型

Question

我有以下数值变量：

@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（）将被使用。但是当混合百分比和px值时，我们必须使用calc（），不是吗？

Answer 1

LESS将尝试计算所有不会转义的内容，直到您编译strict math为止。换句话说：(90.5% - (3 * (35px + 0px + 1px)))/3的结果是什么？少不能知道，我想这是什么操作无效类型试图告诉我们。

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

逃逸一般看起来像这样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 round function使用不完成工作。该函数需要一个浮点数作为参数，所以您不能将它与CSS calc（）函数混合使用。舍入只有在编译时已知值时才有意义。出于同样的原因，我删除了上述计算中的/ @i，因为您无法将calc（）除以数字。