Question

我需要为每个用户提供动态样式。问题是可以在两个主题之间进行选择，一个是静态的，另一个是用户可以改变的。更改后，当前用户主题值将设置为sass变量并需要预编译。我怎么能这样做？

Answer 1

最好是依靠纯CSS功能，而不是在每个请求上编译SCSS（效率非常低）。

鉴于此基本SCSS文件：

.base-theme {
    .color-main {
      color: $blue-lighter;
    }
    // and so on
}

你可以这样使用：

<p class="color-main"> ... </p>

根据存储在数据库中的设置，您可以生成替代方案像这样的主题：

<style>
.alt-theme .color-main {
  color: <%= current_user.colors.main %>;
}
</style>

并稍后应用它们：

<body class="<%= user.has_theme?? 'alt-theme' : 'base-theme'  %>">...</body>