Как использовать javascript для установки s css переменных "$ c1: var (- mainColor);"

Question

Я устанавливал css переменные с javascript вот так

async setColors() {
  this.colors = await this.afs.streamCollection('settings/theme/colors').take(1).toPromise();
  this.colors.forEach(color => {
    document.querySelector('body').style.setProperty(`--${color.name}`, color.code);
  });
}

.primary-bg {
    background: var(--mainColor) !important;
}

Теперь мне интересно, есть ли какие-нибудь творческие способы использовать эти переменные в комбинации с функциями от прекомпиляторов, таких как s css

    $color_primary: var(--color_primary); ;
    $color_secondary: var(--color_secondary);

    $colors:
        "color_primary" $color_primary,
        "color_secondary" $color_secondary,
    ;


    @each $color in $colors{
        // .color / color
        .#{nth($color, 1)}, #{nth($color, 1)}{
            color: nth($color, 2) !important;
            fill: nth($color, 2) !important;
            a{
                color: nth($color, 2);
            }
        }
        // .color-bg
        .#{nth($color, 1)}-bg {
            background: nth($color, 2) !important;
        }

        // .color-hover
        .#{nth($color, 1)}-hover:hover {
            color: nth($color, 2) !important;
        }
    }