css - 如何包含数据驱动的 sass 值？

Question

我想为我的网站使用 SCSS。但是，这是一个 Multi-Tenancy 站点，我希望 CSS 值根据客户动态生成(从数据库)。我不想为每个客户创建单独的设计时 SCSS 文件。

我过去用 CSS 做过类似的事情，我在 CSS 文件中包含了标记，在响应中返回 CSS 文件之前，这些标记将被数据库中的数据替换。例如，

h1 {
    color: $h1FontColor$;
}

但是，我不能这样做，因为 SCSS 处理器会抛出一个错误，指出期望值无效。

有什么办法解决这个问题吗？处理器能否提高容忍度以允许这些占位符通过？

到目前为止，我发现的最佳解决方案是将值包装在注释中，然后可以将其用作占位符。虽然它有点麻烦，但缺点是它在环绕 SASS 变量时不起作用，因为注释不会在正确的位置复制到已编译的 CSS 中:

h1 {
    /* $h1FontColor$ */ color: red; /* $$ */
}

Answer 1

为此，我建议根据请求(服务器端)编译和缓存您的 sass。 Shopware 使用 similar approach generating a .less config并按需交付 CSS。

生成一个包含 $h1FontColor 等变量的 .scss 变量文件，在您的 main.scss 中使用它并使用(取决于您的堆栈)编译您的文件 node-sass-middleware对于 express/nodejs-servers 或 scssphp用于动态 PHP。