CSS 在 LESS 中进行计算的变量

Question

我有一个名为 --menuWidth 的 CSS 变量。我正在尝试将此变量与算术运算符一起使用，但遇到了问题。

我尝试了以下方法：

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

但是 less 处理器输出显示 "OperationError: Operation on an invalid type"（在第 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 解决了这个问题。

CSS 在 LESS 中进行计算的变量

CSS variable with calculation inside LESS

css

less