In CSS3, we can create color variables. Like so:
:root {
--red: rgb(255, 0, 0);
}
and use it elsewhere in document. Like so:
.element1 {
background: var(--red);
}
Now I want the .element2
's color to be 80% of alpha value of --red
, normally I would do rgba(255, 0, 0, .8)
. But now I am using color variable --red
. Is there any way to calc()
ulate the alpha value over --red
? Because I don't want to fill my CSS file with variables.
PS: This question may seem like How do I apply opacity to a CSS color variable? post, but is different because that question discusses on how to create another variable for the same.