Nested variables

Giganews Newsgroups
Subject: Nested variables
Posted by:  Andrew Poulos (ap_pr…@hotmail.com)
Date: Thu, 25 Oct 2018

I have this background colour

rgba(255, 0, 0, 0.5);

and I need the colour and the opacity to be separate CSS variables (the
user can change either).

I tried this

:root {
  --user-opacity: 0.5;
  --user-color: rgba(255, 0, 0, var(--user-opacity);
}

..box {
  background-color: var(--user-color);
}

and it seems to work in Chrome, Edge and Firefox. Is this an acceptable
way to use CSS variables?

Andrew Poulos

Replies