SASS 是一种 CSS 预处理器，可以通过变量、函数、嵌套等方式扩展 CSS 的功能。在前端开发中，经常需要实现多主题样式切换，例如白天模式和夜间模式。本文将介绍如何使用 SASS 实现多主题样式切换。
1. 定义主题变量
首先，需要定义多个主题的变量。例如，我们可以定义两个主题：白天和夜间。
-- -------------------- ---- ------- ------------- - ----------- ----- ----- ----- ----- ------- -- ------------ - ----------- ----- ----- ----- ----- ------- --展开代码
在上面的代码中，我们分别定义了 $theme-light 和 $theme-dark 变量，用来表示白天和夜间主题的颜色。
2. 定义 mixin
接下来，我们需要定义 mixin，用来切换主题。这里我们定义一个 theme($theme) 的 mixin，接受一个 $theme 参数，用来指定要切换的主题。
@mixin theme($theme) { @each $key, $value in $theme { --#{$key}: #{$value}; } }
在上面的代码中，我们使用 @each 循环遍历 $theme 变量中的键值对，然后使用 --#{$key} 的方式定义 CSS 变量，并将值设置为 $value。
3. 切换主题
现在，我们已经定义了多个主题的变量和 mixin，接下来就可以开始切换主题了。
首先，需要在 HTML 中定义一个用于切换主题的按钮。
<button id="theme-toggle">切换主题</button>
然后，在 CSS 中定义全局变量，用来存储当前主题。
:root { --background: #fff; --text: #333; --link: #007bff; }
在上面的代码中，我们使用 :root 选择器定义全局变量，初始值为白天主题的颜色。
接下来，在 SASS 中定义初始主题的 mixin。
body { @include theme($theme-light); }
在上面的代码中，我们使用 @include 引入 theme($theme-light) mixin，将页面的主题设置为白天主题。
最后，在 JavaScript 中监听按钮的点击事件，切换主题。
-- -------------------- ---- ------- ----- ------------ - ---------------------------------------- --- ---------- - ------ -------------------------------------- -- -- - ---------- - ------------ ----- ----- - ---------- - ----------- - ------------- ---------------------------------------------------------- --------------------- ---------------------------------------------------- --------------- ---------------------------------------------------- --------------- ---展开代码
在上面的代码中，我们首先定义一个 isDarkMode 变量，用来记录当前是否为夜间模式。然后，在按钮的点击事件中，切换 isDarkMode 变量的值，并根据当前模式选择相应的主题。最后，使用 document.documentElement.style.setProperty 方法设置页面的 CSS 变量。
4. 总结
通过上面的步骤，我们就可以使用 SASS 实现多主题样式切换了。首先，需要定义多个主题的变量，然后定义一个 theme mixin，用来切换主题。最后，在 JavaScript 中监听按钮的点击事件，切换主题。这种方式可以很方便地实现多主题样式切换，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650915ff95b1f8cacd3e0480
