在 Sass 中使用 html 类更改 $primary、$secondary 颜色答案

【问题标题】：Use html class to change $primary, $secondary colors in Sass在 Sass 中使用 html 类更改 $primary、$secondary 颜色
【发布时间】：2016-09-25 03:08:03
【问题描述】：

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

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

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

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

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

【问题讨论】：

我很确定您必须为此使用 JavaScript 或 PHP 或 Python 之类的东西。 HTML 只是一种标记语言，不允许进行太多交互

标签： html css drupal sass

【解决方案1】：

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

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

山姆

【讨论】：

【解决方案2】：

首先，您应该考虑通过切换 CSS 类而不是 SASS 来执行此操作。一旦你的站点启动并运行，sass 就已经编译好了，它已经是纯 html 和 css 了，与 SASS 无关，对吗？

所以在我看来，您的代码可能如下所示：

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>

【讨论】：