如何使用 sass 给用户多个主题选项答案

【问题标题】：how to use sass to give users multiple theme options如何使用 sass 给用户多个主题选项
【发布时间】：2018-10-23 15:00:42
【问题描述】：

我正在尝试为网站提供多个主题。我知道如何使用 sass。据我了解，步骤如下。

正在创建 sass 文件。
sass 文件已预处理。
相应的css文件已创建

这意味着 css 文件已经正确编写（通过 sass 或直接 css）并在 html 文件中使用。但我想实现的方式是有一个选项框允许用户使用主题。无论用户点击什么主题，新选择的主题都会立即应用到 html 页面中。我如何通过使用 sass 来实现这一点？如果你有这种经历，能给我一些概念吗？

【问题讨论】：

标签： css sass themes

【解决方案1】：

有几种不同的方法，但一种选择是为每个主题设置父类，以容纳特定于这些主题的样式。

例如，SCSS：

.dark-theme {
    .content {
        background: #333;
        color: #fff;
    }
}

.light-theme {
    .content {
        background: #eee;
        color: #333;
    }
}

然后当您的用户选择一个主题时，您可以使用 javascript 更改顶级元素上的类，例如body：

HTML：

<body class="dark-theme">
    ...
</body>

JS：请参阅how to change a classname with javascript 的此答案。

【讨论】：

啊，看起来简单明了。我会试试。非常感谢！！
对于迟到的回复真的很抱歉。我有个问题。 scss文件也得转成css文件，然后把转换后的css文件链接到html文件中？
正确，如果你想使用 Sass 编写你的 css 样式，你必须将它转换为 css 以便浏览器能够加载它。然后在html中，可以在head标签<head><link rel="stylesheet" type="text/css" href="path/to/mystyle.css"></head>中包含“外部样式表”

【解决方案2】：

您可以使用CSS variables。不能在 IE 上工作 =( 但是太棒了！

/* Common css */
p {
  color: var(--color);
  font-size: var(--font-size);
  font-family: var(--font-family);
}

<p>Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.</p>

<!--Theme A variables-->
<style>
  :root {
    --color: red;
    --font-size: 20px;
    --font-family: sans-serif;
  }
</style>

<!--Theme B variables-->
<!--style>
  :root {
    --color: green;
    --font-size: 14px;
    --font-family: serif;
  }
</style-->

【讨论】：