Nested Derived CSS Variable

Question

I have the following CSS


:root {
  --primary: #1776BF;
  --header-background-color: var(--primary);
}

header {
  --primary: #EA5742;
}

header {
  position: fixed;
  top: 0;
  height: 60px;
  left: 0;
  right: 0;
  background-color: var(--header-background-color); //Expecting it to be #EA5742 but it is still #1776BF
}

As far as I have researched, CSS Variable is not meant to be for this type of case. But still, Is there any way to achieve the expected behavior as I mentioned in the comment line of the above code snippet.

share you use case. The answer to your question is No but probably your are tackling the problem the wrong way and there is another solution — Ritesh Rohan, Sep 27 '21 at 13:05

score 0 · Answer 1 · answered Sep 27 '21 at 13:05

If you want --header-background-color to update is value for header, then you'll have to redeclare that variable too. Just try re-adding --header-background-color: var(--primary); below your second --primary declaration and it will work.

:root {
  --primary: #1776BF;
  --header-background-color: var(--primary);
}
header {
  --primary: #EA5742;
  --header-background-color: var(--primary); /* you need to redeclare this variable so that it takes the newly assigned primary value */
}
header {
  position: fixed;
  top: 0;
  height: 60px;
  left: 0;
  right: 0;
  background-color: var(--header-background-color); 
}
div { /* this is just an example so you can check the global variable works well too */
  position: fixed;
  top: 60px;
  height: 60px;
  left: 0;
  right: 0;
  background-color: var(--header-background-color);
}

<header>Test</header>

<div>Test</div>

In this case, all the variables defined in :root needs to be replicated in the children element. This will be little problematic, if we have 50+ variables in :root. But so far, it is the only way to handle it. — schoolcoder, Sep 27 '21 at 13:36
Well, if the children have different values to the `:root`, then yes, you'll have to redefine them all. But, if that's the case, maybe using global variables is not the best solution for you. How do you plan on using these values? Is it for some kind of theme options settings? — Bettylex, Sep 27 '21 at 14:04

Philippe · Answer 2 · 2021-09-27T14:27:13.553

0

You're right, as var(--xxx) is just replaced by it's value at this time. But why don't you simplify your problematic this way ?

:root {
  --primary: #1776BF;
}

body {
  background-color: var(--primary);
}

header, anotherelement, yetanotherelement, .aclass {
  --primary: #EA5742;
}

header {
  position: fixed;
  top: 0;
  height: 60px;
  left: 0;
  right: 0;
  background-color: var(--primary); 
}

<header>test</header>

edited Sep 27 '21 at 14:27

answered Sep 27 '21 at 13:19

Philippe

1,134
12
22

I have a usecase of changing header theme color alone. By default it is --primary, but the header color alone can also needs to be customized. – schoolcoder Sep 27 '21 at 13:32
Hum I thought my proposition reached your goal, as it redefines the primary color specifically for header. If you test it and doesn't match, please provide us the different cases :) – Philippe Sep 27 '21 at 13:37
I edited the snippet to show you that the `body` element background color reflects the "main" primary color, but that the `header` element only is affected by the change of value. Hope this helps you. – Philippe Sep 27 '21 at 14:30

Nested Derived CSS Variable

2 Answers2