--- theme: cyanosis highlight: atelier-savanna-light --- > 最近想做一个切换主题的功能，但是发现scss和less使用起来还有些区别，写完之后自己总结了一些，大家可以看看。
> less篇请移步[vue使用less切换主题](https://juejin.cn/post/7318084014714273818) **1、scss切换**
首先需要确保项目中已经安装了 **sass** 和 **sass-loader**
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28844ccf80d642fc80d3cdb7d3c36dc4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=324&h=171&s=10168&e=png&b=23272e)
1、在src下面创建style文件夹用于存放css文件，创建theme.scss 和 handle.scss
**theme.scss**
$themes 下面配置的 light 和 dark 是主题颜色的名字，这个自己随意取，用的时候跟这个名字一致即可
light 和 dark 里面的配置名字也是自定义的，使用的时候保持一致即可 ```css $white: #fff; $black: #0e1225; $themes: ( light: ( // 背景色 bg-color: $white, // 文字颜色 font-color: #000, // 渐变背景起始色 bg-color-start: #fefeff, // 渐变背景结束色 bg-color-end: #e5f1fd, // 代码块背景色 code-bg-color: #f5f7fa, // 代码块文字颜色 code-font-color: #409eff, ), dark: ( bg-color: #192342, font-color: #c2c2c2, bg-color-start: #0e1225, bg-color-end: #0e1225, code-bg-color: #2d2d2d, code-font-color: #ccc, ), ); ``` **handle.scss**
这个文件主要是采用minxi混入的方式将属性混入进去
@mixin gradient_background、@mixin font_color 这个名字也是自定义的，使用时对应即可（建议语义化，方便维护）。 ```css @import "./theme.scss"; // 从主题色map中取出对应颜色 @function themed($key) { @return map-get($theme-map, $key); } // 切换主题时获取不同的主题色值 @mixin themeify { @each $theme-name, $theme-map in $themes { // !global 把局部变量强升为全局变量 $theme-map: $theme-map !global; // 判断html的data-theme的属性值 #{}是sass的插值表达式 // & sass嵌套里的父容器标识 @content是混合器插槽，像vue的slot [data-theme="#{$theme-name}"] & { @content; } } } // 获取渐变背景色 @mixin gradient_background($start-color, $end-color) { @include themeify { background: linear-gradient( to bottom, themed($start-color), themed($end-color) ) !important; transition: background-position 0.6s; } } // 获取背景颜色 @mixin background_color($color) { @include themeify { background-color: themed($color) !important; } } // 获取字体颜色 @mixin font_color($color) { @include themeify { color: themed($color) !important; } } // 获取边框颜色 @mixin border_color($color) { @include themeify { border-color: themed($color) !important; } } ``` 这里配置好之后就可以在想要设置颜色的vue文件中引入使用了
**示例**
```js ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97b5bb8348fd4b459b8f29a37818fff4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=503&h=503&s=7870&e=png&b=c3c3c3)
这样就好了（v2和v3都可以用），如果有问题，评论区或者私信我