I'm attempting to transfer CSS Custom Properties to a SASS Mixin. I can successfully use the variables directly in the desired styling. However, there seems to be a problem when utilizing a variable within an If statement.
Here's an example of the Mixin:
@mixin bg-color($hue, $status) {
background: hsl($hue, 50%, 50%); // $hue works correctly
@if $status == 'danger' { // doesn't seem to work!
color: 'red';
} @else if $status == 'warning' { // doesn't seem to work!
color: 'orange';
} @else { // always goes to else branch
color: 'black';
}
}
CSS:
:root {
--hue: 195;
--status: 'default';
}
.demo {
@include bg-color(var(---hue), var(---status));
}
When I manually input the status value in the mixin, it functions properly:
.demo {
@include bg-color(var(---hue), 'danger');
}
Do you have any thoughts on what could be causing this issue?
UPDATE: As mentioned by @temani-afif, this method may not be viable since SASS files are compiled before CSS variables are utilized.