SCSS

HTML

<div class='bar with-opacity'>
    With opacity 
</div>

 
<div class='bar no-css-var-opacity'>
    No css var
</div>

<div class='bar no-opacity'>
    no opacity
</div>

<div class='bar normal-root'>
  Normal with root / no js
</div>

SCSS

// I am trying to load css var from js it works great with the one exception the rgba () function

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}
.bar{
  width:200px;
  height:40px;
  margin-bottom:20px;
  border: 1px solid gray;
  display: flex;
  align-items:center;
  justify-content:center;
}


.with-opacity{
     @include background-opacity(var(--color), 0.5);
}

.no-css-var-opacity{
     @include background-opacity(#000000, 0.5);
} 

.no-opacity{
  color: white;
  background: var(--color)
}


// I know about this aproach and it actualy works in my case i dont know why it does not work in this pen 
:root{
  --color2: #ccf;
}
.normal-root{
     background-color: rgba(var(--color2),0.5);
     @include background-opacity(var(--color2), 0.5);
}

JavaScript

this.window.document.querySelector(':root').style.setProperty('--color', '#000');