Trying opacity with sass and css variables - css

Question

I'm loading css variables into my application from db, using a custom function, which will do something like the below code
document.documentElement.style.setProperty(--primaryColor,'#56647B',);
Everything seems to working except when I have to had an opacity to my color.
background-color: rgba($primaryColor, 0.15) is not working.
When I open the console I see background-color: rgba(var(--primaryColor, #56647B), 0.15);
No error on code, this background color it's just not working.
Any clue? Sass seems not to be able to elaborate the var
Thanks for any help
I tried use css var with sass, I'm looking for a workaround or a way to let sass elaborate css variables to work with opacity on components

Answer 1

If you haven't found a solution yet, here are some options/workarounds because as you have found out, it is not possible to do out of the box. You can convert it to either rgb/a or hsl/a colors.
rgb() or rgba() expect 3 or 4 arguments (r, g, b, a) thus the function can not interpret #56647B. Same goes for hsl() and hsla().
SASS has the built-in function rgba() that can handle hex-values.
e.g. in SASS:
.my-class {
background-color: rgba(#123456, 0.5);
}
will be compiled to:
.my-class {
background-color: rgba(18, 52, 86, 0.5);
}
So you could also make sure that on :root you set the colors with
$yourColorHex: #56647B;
--my-color-with-alpha: rgba($yourColorHex, 0.15);
// basic hex to rgb converter
function hexToRGB(hex) {
const hexNormalized = hex.replace('#', '');
const red = parseInt(hexNormalized.substr(0, 2), 16);
const green = parseInt(hexNormalized.substr(2, 2), 16);
const blue = parseInt(hexNormalized.substr(4, 2), 16);
return `${red}, ${green}, ${blue}`;
}
// this handles rgb and rgba values
function hexToRGBA(hex) {
const hexNormalized = hex.replace('#', '');
const red = parseInt(hexNormalized.substr(0, 2), 16);
const green = parseInt(hexNormalized.substr(2, 2), 16);
const blue = parseInt(hexNormalized.substr(4, 2), 16);
const alpha = hexNormalized.substr(6, 2);
let alphaPercentage = '100';
if (!!alpha) {
alphaPercentage = Math.round(parseInt(alpha, 16) / 0xFF * 100);
}
return `${red}, ${green}, ${blue}, ${alphaPercentage}%`;
}
// apply an alpha channel to your hex value
function hexWithAlpha(hex, alpha) {
const hexNormalized = hex.replace('#', '');
const alphaHex = Math.round(alpha * 0xFF).toString(16);
return `#${hexNormalized}${alphaHex}`;
}
// manually convert your hex into an RGB value and separete the values on the css property e.g. #56647B = rgb(86, 100, 123)
document.documentElement.style.setProperty('--col1', '86, 100, 123');
// add an alpha channel to your hex-value manually
// #56647B26 = rgba(86, 100, 123, 0.15);
// https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
// https://caniuse.com/css-rrggbbaa
document.documentElement.style.setProperty('--col2', '#56647B26');
// convert hex to rgb with a helper function
document.documentElement.style.setProperty('--col3', hexToRGB('#56647B'));
// convert hex to rgba with a helper function
document.documentElement.style.setProperty('--col4', hexToRGBA('#56647B26'));
// add an alpha channel to your hex-value with a helper function
document.documentElement.style.setProperty('--col5', hexWithAlpha('#56647B', 0.15));
:root {
--col1: hotpink;
--col2: hotpink;
--col3: hotpink;
--col4: hotpink;
--col5: hotpink;
}
.container {
display: flex;
flex-flow: row nowrap;
gap: 15px;
}
.box {
width: 100px;
height: 100px;
}
.box-1 {
background-color: rgba(var(--col1), 0.15);
}
.box-2 {
background-color: var(--col2);
}
.box-3 {
background-color: rgba(var(--col3), 0.15);
}
.box-4 {
background-color: rgba(var(--col4));
}
.box-5 {
background-color: var(--col5);
}
<div class="container">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
</div>