有没有办法用变量的新值动态地重新加载 SASS？ [复制]

Question

我想创建一个调色板生成器。此时，我让用户输入颜色的r、g 和b 值。但是，我不知道如何在 SASS 变量中使用这些值。例如，

假设我正在生成这样的颜色较浅的版本：lighten($color, 10%);。有没有办法使用我在上面输入中使用的这三个变量用 JavaScript 设置$color？

Answer 1

看起来这是 impossible，因为 SASS 信息在编译成 CSS 后就会消失。

也许改用 Javascript 淡化颜色？然后你可以设置一个 JS 变量。以下摘自CSS Tricks：

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);