Meteor 动态scss可变流星

我有一个scss变量$tint color，用于大约100个地方

一旦用户登录，我想根据他们的配置文件加载一种颜色，并替换$tint color的所有用法

到目前为止，我发现了两种非理想的解决方案：

1） 并替换相关属性

我不断地产生新的元素，所以这需要反复发生

2） 创建一个覆盖样式表，以每个元素为目标

这将需要大量重复的代码

---

有更好/更简单的方法吗？我曾考虑过向scss中的元素添加一个类，但我不确定这是否可行。提前感谢您的帮助

我现在要做的是在加载概要文件后加载一个主题css文件

在服务器上，我公开了一个路由，它动态地替换任何颜色，并返回主题css

问题是，我不是替换scss变量，而是替换颜色的任何出现。这是因为在执行代码时，.scss文件已经绑定到服务器上的.css文件中

// return a theme based on the tintColor parameter
this.route('theme', {
    where: 'server',

    action: function () {
        var files = fs.readdirSync('../client');

        // find the css file (not the .map file)
        var cssFile = _(files).find(function (fileName) {
            return fileName.indexOf('.css') > 0 && fileName.indexOf('.map') < 0;
        });

        var style = fs.readFileSync('../client/' + cssFile, 'utf8');

        // remove comments (cannot have them for minification)
        style = style.replace(/(?:\/\*(?:[\s\S]*?)\*\/)|(?:([\s;])+\/\/(?:.*)$)/gm, '');

        // replace the default tint-color with the dynamic color
        style = style.replace(/8cb850/g, this.params.tintColor);

        // minify css
        if (Settings.isProduction()) {
            // from the minifiers package
            style = CssTools.minifyCss(style);
        }

        this.response.writeHead(200, {'Content-Type': 'text/css'});
        this.response.end(style);
    }
});

---

如果执行此操作，请确保将scss文件作为资产添加到包中。

在原始css中设置基本$tint颜色

然后使用meteor发送带有所选用户色调的内联CSS

示例：

.tint {
  background-color: USER-TINT;
  color: USER-TINT;
}

---

这样，您可以缓存原始css文件并保存传输负载

您实际上没有选择Sass的权利：它必须先编译，然后才能发送给用户。@cimmanon Yep我理解这一点。我正在寻找解决问题的方法。您是否建议在服务器上生成覆盖样式表？@jonperl，是和否。您应该始终尝试将文件数量保持在最低限度。在本例中，我要么使用JS注入所需的自定义CSS颜色，要么使用meteors优秀模板引擎渲染自定义样式。这样，您就可以在需要时随时更新它，而无需将生成的整个样式表发送给客户端。我希望这能澄清问题，我不是最擅长解释的人！如果您想进一步讨论，请随时与我联系！谢谢你的进一步解释。这种方法的问题是，我在大约30%的选择器中使用了淡色。这将需要大量特定于模板的逻辑，对于代码复杂性，我更愿意避免这种情况。由于css将在第一次下载后缓存，因此我不太关心第一次的初始开销。

.tint {
  background-color: USER-TINT;
  color: USER-TINT;
}