使用js操作sass变量，同时还需要使用sass的mix怎么解决？

Question

想做一个自定义任何主题颜色的系统，现思路如下：

1. 使用 elementui 的颜色选择器动态选择主题颜色
2. 将选择的主题颜色动态赋值给 sass 中声明的 $mainColor 全局变量
3. 使用 sass 的 mix 将 $mainColor 的 浅色(tiniColor) 计算出来

现代码如下：
全局样式 color.scss ：

$mainColor: var(--main-color, #0081ff);

// 这是计算 tintColor 的方法
@function tint($color, $percentage) {
    @return mix(#fff, $color, $percentage);
}

this.color已经绑定到颜色选择器：

data() {
    return {
        color: '#0081ff',
    }
},
watch:{
    color(newVal){
        // 在网上找到的别人用 js 动态改变 sass 的变量的办法
        document.getElementsByTagName('body')[0].style.setProperty('--main-color', newVal)
    }
}

按钮在鼠标悬浮时显示一个浅色(tiniColor)

button.primary {
    color: $mainColor;
    
    &:hover {
        color: tint(#{$mainColor}, 10%);
    }
}

报错信息是：var(--main-color, #0081ff) is not a color

不懂就问，有解决的办法或者新的思路吗？

Answer 1

首先呢浏览器里面就没有 sass 这个概念了，他编译之后就是 css 了。

document.getElementsByTagName('body')[0].style.setProperty('--main-color', newVal)

这一坨看上去，也是修改 css 的变量而已。但是 css 变量要这种写。所以看上去，你把 sass 的变量改成 css 的变量就好了。但是我不知道你用css变量会考虑兼容嘛

:root{
    --color: red;
}

Answer 2

有解决这个问题吗？我也在为这个问题苦恼。

Answer 3

思路是有，但是难度很高，换做是我这种菜鸟的话，全情投入半年应该可以搞出来。
那就是魔改 SASS 的代码，使之可以在浏览器中处理 .sass 文件。
处理之后，要么用编译出来的 .css 文件生成本地链接去替换指定的 link[ref=stylesheet]的 href，要么直接给页面追加 style 标签，要么输出 CSSRules 直接操作 CSSStyleSheet。