Vue+scss设置主题切换

表现形式

.demo[data-theme="default"]{
	color:#000;
}
//不同主题
.demo[data-theme="primary"]{
	color:#fff;
}

SCSS

定义主题

$themes:(
	default:(
    	color:#000,
    ),
    primary:(
    	color:#fff,
    ),
);

混入器

//定义混入器
@mixin theme{
    @each $name,$map in $themes{
		$map:$map !global;	//提升为全局变量
        &[data-theme="#{$name}"]{
			@content;		//接收混入
        }
    }
}
//设置主题数据
@function t($key){
	@return map-get($map,$key);
}

封装模块

@mixin box{
    @include theme{
		color:t('color');
        font-size:t("size");
    }
}

@include box;//使用

Vue

动态主题

<template>
	<div class="demo" :data-theme="theme"></div>
</template>
<script>
	export deafult{
		props:{
            /** 组件接收主题类型参数 */
            theme:{
				type:String,
            	default:'default',
            }
        }
    }
</script>
<style lang="scss" scope>
    @import 'theme.scss';	//引入scss文件
    .demo{
		/** 调用混入器 */
        @include theme{
			color:t('color');
        }
    }
</style>

下载支持

• 安装scss

  npm i node-sass@4.14.1 -S
  npm i sass-loader@7.3.1 -S