不能使用带变量的calc()-SyntaxError:对无效类型进行操作 [英] calc() with variables not possible - SyntaxError: Operation on an invalid type

问题描述

我有以下LESS变量:

I've got following LESS variables:

@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));
}

现在，编译器将引发以下错误:

Now the compiler throws following error:

>> 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()，不是吗?

There would be no error if @dashboard-height would have a px value and no calc() would be used. But when mixing percentages and px values, we have to use calc(), don't we?

推荐答案

在您使用

LESS will try to calculate everything that is not escaped until you compile with strict math on. In other words: what is the outcome of (90.5% - (3 * (35px + 0px + 1px))) / 3? Less can't know and I guess that is what Operation on an invalid type tries to tell us.

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

Turning strict math mode on (lessc -sm=on myfile.less myfile.css) will solve your problem immediately. But it has the unwanted side effect that also every other calculation in your other less files won't get processed (only maths that is inside un-necessary parenthesis will be processed). So this might not be an option as you probably would have to refactor your existing code base.

转义通常看起来像这样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.

Escaping in general looks like this width: ~"calc(100% - 20px)";. It's a little tricky as we don't want to also escape the variables inside the calc function. A way to achieve this to interpolate the variables:
height: ~"calc(@{dashboard-height} - (@{i} * (@{dashlet-header-height} + @{dashboard-margin} + @{dashlet-border})))" / @i;
which will result in e.g. height: calc(90.5% - (2 * (35px + 0px + 1px))) / 2. At first glance this is better than a compile error, but it is invalid CSS.

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

Fortunately, we can only escape some of the operators (the minus in this example)
height: calc(@dashboard-height ~"-" (@i * (@dashlet-header-height + @dashboard-margin + @dashlet-border))); which will result in e.g. height: calc(90.5% - 36px);

转义完成后，您将得到下一个错误，告诉您LESS的用法

When you are done with escaping you will get the next error, telling you that your usage of the LESS round function does not work. The function expects a floating point number as argument, so you can't mix it up with the CSS calc() function. Rounding only makes sense here if the value is known at compile time. For the same reason I removed the / @i in the above calculation, as you can't divide calc() by a number.

这篇关于不能使用带变量的calc()-SyntaxError:对无效类型进行操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！