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;
}