$themes: (light: (font_color: #fff,),dark: (font_color: #000,),
);@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: themed($color) !important;}
}//获取字体颜色
@mixin font_color($color) {@include themeify {color: themed($color) !important;}
}@mixin stroke_color($color) {@include themeify {stroke: themed($color) !important;}
}@mixin font_fill($color) {@include themeify {fill: themed($color) !important;}
}
@mixin border($color) {@include themeify {border: themed($color) 1px solid;}
}
@mixin border_color($color) {@include themeify {border-color: themed($color) !important;}
}
@mixin border_bottom_color($color) {@include themeify {border-bottom-color: themed($color) !important;}
}
@mixin border-bottom($color) {@include themeify {border-bottom: themed($color) 1px solid !important;}
}