Question

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

创建sass文件。
sass文件已经过预处理。
相应的css文件已创建

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

Answer 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的答案。

Answer 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-->

如何使用Sass为用户提供多个主题选项

2 个答案: