Javascript 有没有办法用变量的新值动态地重新加载SASS？

我想创建一个颜色托盘生成器。此时，我让用户输入颜色的

r

、

g

和

b

值。但是，我不知道如何在SASS变量中使用这些值。比如说,

假设我正在生成这样的颜色的较淡版本：

lighte（$color，10%）。有没有办法用JavaScript使用我在上面输入中使用的这三个变量设置
$color
 看起来是这样，因为SASS信息一旦编译成CSS就会消失

也许可以用Javascript来减轻颜色？然后您可以设置一个JS变量。以下资料摘自：

函数颜色（col，amt）{
var usePound=假；
if（列[0]==“#”）{
col=col.slice（1）；
usePound=true；
}
var num=parseInt（col，16）；
var r=（数量>>16）+金额；
如果（r>255）r=255；
如果（r<0）r=0，则为else；
var b=（（数值>>8）和0x00FF）+金额；
如果（b>255）b=255；
如果（b<0）b=0，则为else；
变量g=（数量和0x0000FF）+金额；
如果（g>255）g=255；
如果（g<0）g=0，则为else；
返回（使用磅？#“：”）+（g |（b）备用副本：
function LightenDarkenColor(col, amt) {

    var usePound = false;

    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }

    var num = parseInt(col,16);

    var r = (num >> 16) + amt;

    if (r > 255) r = 255;
    else if  (r < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if (b > 255) b = 255;
    else if  (b < 0) b = 0;

    var g = (num & 0x0000FF) + amt;

    if (g > 255) g = 255;
    else if (g < 0) g = 0;

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);

}

// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20); 

// Darken
var NewColor = LightenDarkenColor("#F06D06", -20);