@import "./themes.scss"; //切换主题时 获取不同的主题色值 @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; } } } //从主题色map中取出对应颜色 @function themed($key) { @return map-get($theme-map, $key); } //获取背景颜色 @mixin background_color($color) { @include themeify { background-color: themed($color) !important; } } //获取字体颜色 @mixin font_color($color) { @include themeify { color: themed($color) !important; } } //获取icon颜色 @mixin fill_color($fill) { @include themeify { fill: themed($fill) !important; } } //获取border @mixin border($border) { @include themeify { border: themed($border); } } //获取border_color @mixin border_color($color) { @include themeify { border-color: themed($color) !important; } } //获取box-shadow @mixin box_shadow($color) { @include themeify { box-shadow: themed($color); } }