Updating alpha value in css custom property doesn't work [duplicate]

Question

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 · Accepted Answer · 2020-07-22 21:28:41Z

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>

answered Jul 22, 2020 at 21:28

doğukan

28k15 gold badges67 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hyperdrive · Accepted Answer · 2020-07-22 23:19:02Z

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);
}

edited Jul 22, 2020 at 23:19

answered Jul 22, 2020 at 21:31

hyperdrive

1,8565 gold badges21 silver badges36 bronze badges

2 Comments

sungl Over a year ago

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.

hyperdrive Over a year ago

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.

Collectives™ on Stack Overflow

Updating alpha value in css custom property doesn't work [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related