An SO staff member asked an interesting question here: Overriding :root CSS variables from inner scopes which is, at least for me, a perfect duplicate of another one: CSS scoped custom property ignored when used to calculate variable in outer scope. I closed it and added my comment.
The question get reopened almost instantly without any comment or edit made to the question.
Is there any special treatment to such question?
Even if it's already at +12 and will get more views than the other one, the answer is already in the target and I am convinced that it's actually the only answer explaining his issue and all the possible workarounds. Even If we can imagine there will be another answer, it should still belong to the duplicate target.
I also consider the fact that I may be wrong. In all the cases, at least a comment or an edit to the question should be added.
UPDATE
I do not agree it's a duplicate question, though the answer/solution may be similar the questions are quite different (e.g. one's integers and another is colors, which have different concerns and potentially alternative approaches and workarounds). I get that they are closely related in the CSS3 world, but the workarounds and suggestions for each may differ. – Nick Craver♦
Both question deal with the same issue which is the impossibility of changing the value of a CSS variable if it's already evaluated at :root
level.
The code from Aaron question:
:root {
--orange: hsl(255, 72%, var(--lightness, 68%));
}
.card {
background: var(--orange);
}
.card:hover {
--lightness: 45%;
}
The code from the duplicate
:root {
--size-1: calc(1 * var(--scale, 1) * 1rem);
--size-2: calc(2 * var(--scale, 1) * 1rem);
--size-3: calc(3 * var(--scale, 1) * 1rem);
}
.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }
.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }
In both cases, we have var(x)
at :root
then we try to update it. This won't work and I am explaining why considering a detailed answer using the specification and highlighting all the possible workarounds.
a quote from my answer that apply to both cases:
In all the cases, we should avoid any evaluation at
:root
level because it's simply useless. The root level is the uppermost level in the DOM so all the elements will inherit the same value and it's impossible to have different values inside the DOM unless we evaluate the variable again.
I also commented on Aaron question after the closure:
short answer: it's impossible. if var() is used inside :root then it's over, it's already evaluated for all the DOM
https://stackoverflow.com/posts/<id>/revisions
. It needs an edit to add a link