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. — user736893
– user736893, Commented Jun 18, 2018 at 15:52
Update to Less v3 or higher or (if you have to use earlier versions) see stackoverflow.com/questions/50913203. — seven-phases-max
– seven-phases-max, Commented Jun 19, 2018 at 6:17
My bad, stackoverflow.com/questions/11972084 or any of stackoverflow.com/search?q=%5Bless%5D+calc. — seven-phases-max
– seven-phases-max, Commented Jun 19, 2018 at 14:19

user736893 · Accepted Answer · 2018-06-19 13:37:03Z

1

Updating LESS from 2.7.2 to 3.0.4 fixed the issue.

answered Jun 19, 2018 at 13:37

user736893

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS variable with calculation inside LESS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related