Accessing a custom css variable made of other custom variables does not compute the value

Question

Being new to CSS, I like to use CSS custom variables, along with calc, to make my code easily understandable, reusable and modifiable by others, and to keep the page consistent (I don't want the color I use as a main color to be different on two different parts of my page).

However, when I wanted to read via Javascript such a custom variable, which is defined as the sum of 2 other ones, it gave me the plain text "calc(<value of the first variable> + <value of the second one>)".

What's more surprising, when I assigned to a standard CSS property the above sum, and then read it, it returned what I was expecting (the result of the sum).

Here's a simplification of my code:

let inputExample1 = document.getElementById("myFirstInput");
let inputExample2 = document.getElementById("mySecondInput");
            
inputExample1.value = getComputedStyle(inputExample1).getPropertyValue("--a-local-custom-variable");
inputExample2.value = getComputedStyle(inputExample2).getPropertyValue("top");

:root{
    --a-custom-variable: 10px;
    --another-custom-variable: 20px;
    --a-result-of-the-previous-variables: var(--a-custom-variable) + var(--another-custom-variable);
}

input {
    --a-local-custom-variable: calc(var(--a-result-of-the-previous-variables));
    top: calc(var(--a-result-of-the-previous-variables));
}

<html>
    <head>
        <link href="Custom_CSS_variable_test.css" rel="stylesheet">
    </head>
    <body>
        <input id="myFirstInput" type="text">
        <input id="mySecondInput" type="text">
    </body>
</html>

Hi from what I understand you are trying to get the new value of your calculated values is that correct? — 13garth, Aug 06 '18 at 09:01
I'm still not 100% what you are asking for. I am going to post an answer of what I think you are asking for have a look and give it a try — 13garth, Aug 06 '18 at 09:04
@GarthBaker Yes, you're right. I try to get the calculated value of "--a-local-custom-variable" — Flunec, Aug 06 '18 at 09:12
@GarthBaker I did nothing. I have not enough reputation to do that, anyway. — Flunec, Aug 06 '18 at 09:19

score 0 · Accepted Answer · answered Aug 06 '18 at 09:05

0

Refering to the specification:

Custom properties are left almost entirely unevaluated, except that they allow and evaluate the var() function in their value.

So the result you got is logical BUT the top property will behave differently and will hold the final result. So the custom property will kept unevaluated until it get used with a property.

answered Aug 06 '18 at 09:05

Temani Afif

245,468
26
309
415

So there is no way to force the custom property's evaluation? Do I have to use a dummy standard property instead? – Flunec Aug 06 '18 at 09:17
@Flunec it's not logic to force the evaluation simply because it's CSS and not a classic programming language, the evaluation should be done when need because the properties can change – Temani Afif Aug 06 '18 at 09:20
@Flunec check this answer : https://stackoverflow.com/questions/51660196/unable-to-overwrite-css-variable-with-its-own-value/51660820#51660820 – Temani Afif Aug 06 '18 at 09:20
Thank you, I think I see the point. It still a bit strange to me that a standard property behave differently than a custom property in this case, but the cycle issue it could bring otherwise make this understandable. – Flunec Aug 06 '18 at 09:36
@Flunec because a property is the final destination so if you set `top` then it's the top value of that element BUT a custom property hold the value and we can use it anywhere so it wait until it get used somewhere to be evaluated. Don't think programming language, but think CSS ;) – Temani Afif Aug 06 '18 at 09:37

Accessing a custom css variable made of other custom variables does not compute the value

1 Answers1