How to Apply Opacity to a CSS Color Variable

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

Is it possible to assign opacity to a SCSS hex color variable, re using that variable?

Here you go...

WRONG:

$first-with-opacity: rgba($color: $first-color, alpha: 0.05);

CORRECT:

$first-with-opacity: rgba($first-color, 0.05);

How do I apply opacity to a CSS color variable?

You can't take an existing color value and apply an alpha channel to it. Namely, you can't take an existing hex value such as #f0f0f0, give it an alpha component and use the resulting value with another property.

However, custom properties allow you to convert your hex value into an RGB triplet for use with rgba(), store that value in the custom property (including the commas!), substitute that value using var() into an rgba() function with your desired alpha value, and it'll just work:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

:root {--orange: 253, 166, 60;--orange-light: rgba(var(--orange), 0.15);  }

p {  color: var(--orange-light);}

<p>Hello orange world</p>

:root {  --c:255,0 ,0;  --o:0.5;}html {  background:rgba(var(--c),var(--o));}body {   background:rgb(var(--c));   height:100px;}.box { --c:12,12,12; --o:0.7; background:rgba(var(--c),var(--o)); color:#fff;}

<div class="box">  some content</div>

:root {
  --set1: #abc;
  --set1-1: rgb(from var(--set1) r g b / 80%);
  --set1-3: rgb(from var(--set1) r g b / 50%);
  --set1-5: rgb(from var(--set1) r g b / 30%);
}