One of the downsides of using variables in CSS is repeating the code For example If I had 10 different color and I want to change them by hovering I have to define 10 variables in :root and then write 10 different times the same code like this
:root {
--color-1: ..
--color-2: ..
...
}
#item1:hover {
background-color: rgba(var(--color-1), 0.5);
}
#item2:hover {
background-color: rgba(var(--color-2), 0.5);
}
...
Is it possible to write something like this without repeating the code? It means reference the current value, whatever it is right now
#item1 {
background-color: var(--color-1);
}
#item2 {
background-color: var(--color-2);
}
.item:hover {
background-color: rgba(@self-background-color, 0.5);
}
- I'm aware people using CSS preprocessors to not repeat the code themselves