我有一个基于 SASS 构建的网站。在浅色和深色主题之间切换时，我想更改某些变量，但所有变量都会被编译并转换为其原始值。因此，我不知道如何在更改主题时更改 SASS 变量。
假设我在 style.scss 中有以下变量:
$mainColor: #eaeaea;
$secondaryColor: #fff;
$mainText: black;
$secondaryText: #2a3a47;
$borderColor: #c1c1c1;
$themeDotBorder: #24292e;
$previewBg: rgba(251, 249, 243, 0.8);
$previewShadow: #f9ead6;
$buttonColor: #0a0a0a;
如何在切换主题时更改这些变量。我可以创建两个单独的 css 文件，但这将是多余的代码。你能帮我吗？
最佳答案
取决于您的构建过程和旧版浏览器的要求，例如 ie11。
使用 css 自定义属性(css 变量)使主题变得更容易。基本思想是您拥有变量，并且在主题更改时更改变量的颜色。
在我非常非常基本的示例中，发生了以下事情以及原因。
- 在根级别设置默认主题的变量。
- 有一个描述主题的类，在我的示例中是
.dark-theme - 当深色主题通过 js 激活时，在 body 上设置一个类，或者根据您的后端和想要的方法进行回发。在我的示例中，我使用 js 来完成。
这里发生的是，在 .dark-theme 中，我们将变量更改为深色主题颜色。这就是它的基础知识，它将帮助您走得更远。
请注意，保存主题的方法完全取决于您拥有 SPA、Wordpress、.NET 等类型的网站。我看到关于将其保存在数据库和用户中的提及，如果您没有用户签名，那么这有点站不住脚。一种方法是将其保存在浏览器本地存储中，并在加载页面时读取它。
const themeSwitcherButton = document.querySelector('.js-theme-switcher')
themeSwitcherButton.addEventListener('click', function() {
const body = document.querySelector('body')
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme')
} else {
body.classList.add('dark-theme')
}
}):root {
--primary-color: deepskyblue;
}
body.dark-theme {
--primary-color: deeppink;
}
.block {
margin-bottom: 3rem;
padding: 2rem;
background-color: var(--primary-color);
}<body>
<p class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos odio atque excepturi, aut voluptate. Similique autem, eos rem cum tenetur perspiciatis voluptatibus reprehenderit cumque, inventore, nam laudantium fugiat molestias eveniet sit commodi deleniti. Ipsa eum animi, excepturi tempore placeat.
</p>
<button class="js-theme-switcher">Theme switcher</button>
</body>关于html - 如何使用 SASS 更改主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63215251/