2

I am trying to override the alpha value in HSLA using CSS custom property. In the code below, I wanted to update the alpha value to 0.1, so the final output should be hsla(0, 0%, 26%, 0.1). When I inspect the element, it has what I expected, but the rendered output doesn't have the alpha value applied. Any solution for this?

Thanks!

:root {
  --bg-color: hsla(0, 0%, 26%, var(--a, 1));
}

.dark {
  color: #efefef;
  background-color: var(--bg-color);
}

.light {
  --a: 0.1;
  color: #888;
  background-color: var(--bg-color);
}
<div class="dark">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quia, at aliquid temporibus optio ipsa ullam eaque et fugiat? Aliquid fugit facere officiis nostrum. Consequatur maiores aspernatur ipsum ratione facilis!</div>
<div style="margin-top: 3rem"></div>
<div class="light">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quia, at aliquid temporibus optio ipsa ullam eaque et fugiat? Aliquid fugit facere officiis nostrum. Consequatur maiores aspernatur ipsum ratione facilis!</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
sungl
  • 1,155
  • 1
  • 7
  • 16

2 Answers2

1

You can try like below:

:root {
  --a: 1;
  --hsl: 0, 0%, 26%;
}

.dark {
  color: #fff;
  background-color: hsl(var(--hsl), var(--a));
}

.light {
  --a: 0.1;
  color: #fff;
  background-color: hsl(var(--hsl), var(--a));
}
<div class="dark">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quia, at aliquid temporibus optio ipsa ullam eaque et fugiat? Aliquid fugit facere officiis nostrum. Consequatur maiores aspernatur ipsum ratione facilis!</div>
<div style="margin-top: 3rem"></div>
<div class="light">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quia, at aliquid temporibus optio ipsa ullam eaque et fugiat? Aliquid fugit facere officiis nostrum. Consequatur maiores aspernatur ipsum ratione facilis!</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
1

I guess it's a scope issue. --bg-color is already defined in :root and has a higher order of importance then when it's used in a class. So --bg-color would need to be redefined to get the change applied.

Or reverse the order of importance, such that declaring --a at a higher specificity (like a class), means it's already defined before it's used in the variable declaration of --bg-color.

Imagine you are the css processor, You look at :root first, see definition for --bg-color and you remember it. Now when you process the rest of the css rules you know, you need to use it. It won't go back and redefine a variable that it has already processed.

div {
  --bg-color: hsla(0, 0%, 26%, var(--a, 1));
}

.dark {
  color: #efefef;
  background-color: var(--bg-color);
}

.light {
  --a: 0.1;
  color: #888;
  background-color: var(--bg-color);
}
hyperdrive
  • 1,786
  • 5
  • 19
  • 33
  • Does a property defined in `root` have higher importance than the same property defined in a specific block? I thought `.light { --a: 0.1; }` is more specific than `:root { --a: 1; }`, so by the specificity rule, shouldn't browser use 0.1 opacity instead of 1? Also I don't understand why browser inspector shows `hsla(0, 0%, 26%, 0.1)` value but renders `hsla(0, 0%, 26%, 1)` output. – sungl Jul 23 '20 at 14:52
  • Yeah that's correct. `--a` in `.light` would have a higher specificity. But you're not using `--a` there. You are using `--bg-color` right. Which has already been processed and defined as a variable. – hyperdrive Jul 24 '20 at 19:13