//详细API参考https://www.sass.hk/docs/
//遍历主题map
@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;
}
}
}
//声明一个根据Key获取颜色的function
@function themed($key) {
@return map-get($theme-map, $key);
}
//暂时想到的常用的开发场景下面三种背景颜色、字体颜色、边框颜色 至于阴影什么之类的忽略了
//获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color);
}
}
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color);
}
}
//获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color);
}
}
可以根据自己的使用场景自定义混入器,上面只定义了三个常用的,更改主题无非是更改背景&边框&字体等的颜色。
3.具体在vue中使用,直接引入对应混入器就好,取哪个颜色,传哪个key,就这么简单
到此,完毕了。至于怎么动态切换html的属性data-theme的值,那就驾轻就熟,js怎么干都行了,下面举例一种:
这里是页面
<i
class=“iconfont el-ui-Group20”
@click=“handleToggleTheme(0)”
:class=“{ themeSelect: parseInt(index) === 0 }”
<i
class=“iconfont el-ui-moon”
@click=“handleToggleTheme(1)”
:class=“{ themeSelect: parseInt(index) === 1 }”