Custom CSS properties not calculating correctly with calc() command - what's the issue? [duplicate]

Question

When I use the exact same calc() command in a custom css property as a standard property (left), and print it to the console in javascript, the custom property is clearly not calculating correctly like the standard property is. My code is as follows:

.note {
  --qq: calc(10px + 100px);
  left: calc(10px + 100px);
}

When I print these to the console using the following code:

console.log("qq = ",getComputedStyle(qqq).getPropertyValue('--qq'))
console.log("left = ",getComputedStyle(qqq).getPropertyValue('left'))

The result in the console is the following:

qq = calc(10px + 100px)
left =  110px

What am I doing wrong here?

Thanks, and best regards.

Was expecting:

qq = 110px
left = 110px

It appears that there are workarounds in some cases (stackoverflow.com/questions/56229772/…) - however, for more complex issues, maybe use js to calculate instead — CoderMuffin
– CoderMuffin, Commented Jun 3, 2023 at 18:50

EthanSteel · Accepted Answer · 2023-06-03 18:39:36Z

-1

You need to create variables in the :root in css, that is why the variable was not being created correctly

:root {
  --qq: calc(10px + 100px);
}
.class {
  left: var(--qq);
}

edited Jun 3, 2023 at 18:39

answered Jun 3, 2023 at 18:03

EthanSteel

3311 silver badge8 bronze badges

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

12 Comments

MrMultiMediator Over a year ago

This is inside of a class. Will this still work: ``` .note { --qq: calc(10px + 100px); left: calc(10px + 100px); } ```

EthanSteel Over a year ago

You should include root and variables at the start of css files, not in a class

A Haworth Over a year ago

There is no reason at all not to set up a variable in a class provided the scope is what you want.

Temani Afif Over a year ago

@MrMultiMediator all what is said by "the coder" is simply wrong.

Temani Afif Over a year ago

@MrMultiMediator custom properties are treated like "string", as simple as that. You see a calc() but JS see a string. Whatever value you will put inside, the JS will show it like it is.

|

Collectives™ on Stack Overflow

Custom CSS properties not calculating correctly with calc() command - what's the issue? [duplicate]

1 Answer 1

12 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Linked

Related