scss全局变量，主题色

scss文件

/*需要切换的颜色变量*/
$color-theme1:red; /* 更换的颜色 */
$color-theme2:orange; /* 更换的颜色 */
$color-theme3:green; /* 更换的颜色 */
$color-theme4:blue; /* 更换的颜色 */
/*定义方法*/
@mixin color_primary($color){
    color:$color;
    /*判断匹配*/
    [data-theme="primary1"] & {
        color:$color-theme1;
    }
    [data-theme="primary2"] & {
        color:$color-theme2;
    }
    [data-theme="theme3"] & {
        color:$color-primary3;
    }
    [data-theme="theme4"] & {
        color:$color-primary4;
    }
}

用法：
app.vue可以定义全局主题色
window.document.documentElement.setAttribute(‘data-theme’, ‘primary1’);
css使用
@import ‘@/assets/css/mixin.scss’;
.test{
width: 50px;
height: 50px;
@include color_primary($color-theme1);
background: $color-theme2;
}