0

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
Kamran Asgari
  • 2,107
  • 3
  • 21
  • 39

0 Answers0