使用 html 类更改 Sass 中的$primary、$secondary颜色

Question

我正在尝试创建一个Drupal站点，该站点允许在单个页面上使用多种颜色主题，而不是整个主题。我在Drupal中有一个选择菜单，允许用户选择应该应用于页面的颜色主题。

我使用此字段的值来设置页面模板的类。我现在想使用这个类来更改 Sass 中的主要/次要颜色值。

例如，如果用户选择蓝色，则在 HTML 模板中包装器是这样的，我希望 Sass 看起来像这样：

$primary: #0000ff;
$secondary: #000066;

并为每个主题更改这些值，绿色，黄色等。这可能吗？

Answer 1

您可以使用它在头部中创建 if/else 语句来调用与所选颜色相关的不同样式表，而不是使用该字段来更改主体类。

这将需要创建多个样式表，但可能是一种解决方法。恐怕没有代码可以提供。

山 姆

Answer 2

首先，你应该考虑使用切换CSS类来做到这一点，而不是SASS。一旦你的网站启动并运行，sass 就已经编译好了，它已经是纯 html 和 css，与 sass 无关，对吗？

所以在我看来，你的代码可能看起来像这样：

屁股：

$theme1-primary: #0000ff;
$theme1-secondary: #000066;
$theme1-primary: #0000ff;
$theme1-secondary: #000066;
.theme1 {
    color: $theme1-primary;
    background-color: $theme1-secondary;
}
.theme2 {
    color: $theme2-primary;
    background-color: $theme2-secondary;
}

.HTML：

<p class="`if something print theme1 else print theme2`"></p>