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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！