1

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
MrMultiMediator
  • 21
  • 5
  • It appears that there are workarounds in some cases (https://stackoverflow.com/questions/56229772/get-computed-value-of-css-variable-that-uses-an-expression-like-calc) - however, for more complex issues, maybe use js to calculate instead – CoderMuffin Jun 03 '23 at 18:50

1 Answers1

-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);
}
EthanSteel
  • 331
  • 8
  • This is inside of a class. Will this still work: ``` .note { --qq: calc(10px + 100px); left: calc(10px + 100px); } ``` – MrMultiMediator Jun 03 '23 at 18:06
  • You should include root and variables at the start of css files, not in a class – EthanSteel Jun 03 '23 at 18:07
  • So classes should not have custom properties? – MrMultiMediator Jun 03 '23 at 18:10
  • classes can use custom properties, but you can not create variables in a class, but you could use ".class { left: var(--qq); } " – EthanSteel Jun 03 '23 at 18:12
  • @MrMultiMediator Is this working for you now? If so please accept the answer – EthanSteel Jun 03 '23 at 18:40
  • 1
    There is no reason at all not to set up a variable in a class provided the scope is what you want. – A Haworth Jun 03 '23 at 18:40
  • I do not actually want the two things to be equal, so that suggestion does not get to the root of it. I am just testing the ability to do calculations in custom css class properties. Also, I have seen that it is possible to create custom properties in a class, I just apparently cannot use calc()? – MrMultiMediator Jun 03 '23 at 18:47
  • Yes, you can use calc. The variable is being set correctly. – A Haworth Jun 03 '23 at 18:56
  • Thanks @AHaworth any sense why it prints to the console differently than the standard property if I am setting it right? – MrMultiMediator Jun 03 '23 at 19:15
  • 1
    @MrMultiMediator all what is said by "the coder" is simply wrong. – Temani Afif Jun 03 '23 at 19:19
  • @TemaniAfif Thanks, I thought so. Apparently my question is a duplicate, and I am trying to figure out by reading the linked post what the fundamental difference between custom properties that use calc and standard properties that use calc is, and why they show up differently on the console. – MrMultiMediator Jun 03 '23 at 19:24
  • 1
    @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. – Temani Afif Jun 03 '23 at 19:27