Question

我想在我的网站上使用SCSS。但是，它是一个多租户站点，我希望CSS值根据客户动态生成（从数据库）。我不想为每个客户创建单独的设计时SCSS文件。

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

h1 {
    color: $h1FontColor$;
}

但是，我无法执行此操作，因为SCSS处理器抛出一个错误，指出expected value is invalid。

有什么办法解决吗？可以使处理器更宽容以允许这些占位符通过吗？

到目前为止，我发现的最佳解决方案是将值包装在注释中，然后将其用作占位符。但是，它有点麻烦，并且具有以下缺点：当包裹在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。

Answer 2

我们找到了一个更好的解决方案：CSS custom properties。只需引用SCSS文件中的属性。我们仍然选择使用SCSS变量，但这可能是不必要的-我们可以完全绕开它们以使用本机CSS自定义属性。

$primaryColour: var(--primary-colour);
$secondaryColour: var(--secondary-colour);
$fontColour: var(--font-colour);

SCSS可以毫无问题地编译，输出CSS中保留的CSS自定义属性。可以在运行时更改属性的值。不幸的是，Internet Explorer不支持自定义属性，但是我们使用css-vars-ponyfill支持IE11。