CSS variable with calculation inside LESS

Question

I have a CSS variable called --menuWidth. I'm trying to use this variable with an arithmetic operator but I'm having trouble.

I tried the following:

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

But the less processor output says "OperationError: Operation on an invalid type" (at column 2?)

I found this working codepen which actually seems to confirm the syntax above, so I'm assuming this is a LESS issue. If so, how can I fix it?

Here is my file structure:

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";

To be clear, I have already removed the operation and set a left-margin of 20px which I know fixes the issue, but I want to know how to do this for future usage. — , Jun 18 '18 at 15:52
Update to Less v3 or higher or (if you have to use earlier versions) see https://stackoverflow.com/questions/50913203. — seven-phases-max, Jun 19 '18 at 06:17
My bad, https://stackoverflow.com/questions/11972084 or any of https://stackoverflow.com/search?q=%5Bless%5D+calc. — seven-phases-max, Jun 19 '18 at 14:19

score 1 · Accepted Answer · answered Jun 19 '18 at 13:37

1

Updating LESS from 2.7.2 to 3.0.4 fixed the issue.

answered Jun 19 '18 at 13:37

CSS variable with calculation inside LESS

1 Answers1