css - 在LESS内部进行计算的CSS变量

我有一个名为--menuWidth的CSS变量。我正在尝试通过算术运算符使用此变量，但遇到了麻烦。

我尝试了以下方法：

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

但是less处理器输出显示“ OperationError：对无效类型进行操作”（在第2列？）

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



这是我的文件结构：

无变量

: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;
    }
}

少布局

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

少编译

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

最佳答案

将LESS从2.7.2更新到3.0.4解决了该问题。