live-telecast-ui-h5/src/assets/css/_handle.scss

@import "./_themes.scss";

//遍历主题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 bs($color) {

    @include themeify {
    
    background-size: themed($color)!important;
    
    }
}
//渐变文字

@mixin bgTextClip($color) {

    @include themeify {
    
        -webkit-background-clip: themed($color)!important;
    
    }
}
//获取背景颜色

@mixin background($color) {

@include themeify {

background: themed($color)!important;

}

}

//获取字体颜色

@mixin font_color($color) {

@include themeify {

color: themed($color)!important;

}

}

//获取边框颜色

@mixin border_color($color) {

@include themeify {

border-color: themed($color)!important;

}

}