在LESS

Question

我有一个名为--menuWidth的CSS变量。我试图将此变量与算术运算符一起使用，但我遇到了麻烦。

我尝试了以下内容：

left: calc(var(--menuWidth) + 20px);

但less处理器输出显示＆＃34; OperationError：对无效类型的操作＆＃34; （在第2栏？）

我发现this working codepen实际上似乎确认了上面的语法，所以我假设这是一个LESS问题。如果是这样，我该如何解决？

这是我的文件结构：

vars.less

:root {
    --menuWidth: 200px;
}

@media screen and (min-width: 1280px) and (max-width: 1919px){
    :root {
        --menuWidth: 250px;
    }
}
@media screen and (min-width: 1920px){
    :root {
        --menuWidth: 300px;
    }
}

layout.less

#headerContainer {
    left: calc(var(--menuWidth) + 20px);
}

compiled.less

@import "vars.less";
@import "layout.less";

Answer 1

将LESS从2.7.2更新到3.0.4可以解决此问题。