Vue中如何使用sass实现换肤(更换主题)功能

原理:

通过设置html的attribute属性在封装的函数中进行判断，进行相应的设置不同的颜色

css中 [ ] 可以识别到在html标签上设置的属性，所以在html上对应属性发生变化时，就会执行相应的样式，

这一步有点类似于平时给div添加一个.active属性，css自动执行相应样式。

 

1.首先切换的样式文件我们需要两个

    varibale.scss： 颜色，字体，背景的配置文件

    mixin.scss： 定义mixin方法的文件。

下面贴出代码:

    varibale.scss

// 颜色，字体，背景的配置文件
//颜色定义规范
$background-color-theme: #3f8e4d;//背景主题颜色默认
$background-color-theme1: red;//背景主题颜色1
$background-color-theme2: #652BF5;//背景主题颜色2
$background-color-theme3: deepskyblue;//背景主题颜色3
$background-color-themesec: #edc148;//背景次要主题颜色
 
$font-color-theme : #3f8e4d;//字体主题颜色默认
$font-color-theme1 : red;//字体主题颜色1
$font-color-theme2 : #652BF5;//字体主题颜色2
$font-color-theme3 : deepskyblue;//字体主题颜色3
$font-color-themesec : #edc148;//字体次要主题颜色
 
$font-color-shallow0 : #000;
$font-color-shallow1 : #111;
$font-color-shallow2 : #222;
$font-color-shallow3 : #333;
$font-color-shallow4 : #444;
$font-color-shallow5 : #555;
$font-color-shallow6 : #666;
$font-color-shallow7 : #777;
$font-color-shallow8 : #888;
$font-color-shallow9 : #999;
$font-color-shallowdb : #dbdbdb;

$background-image:url("~@/assets/images/001.png");
$background-image-theme1:url("~@/assets/images/002.png");
$background-image-theme2:url("~@/assets/images/003.png");

 
//字体定义规范
$font_little_s:10px;
$font_little:12px;
$font_medium_s:14px;
$font_medium:16px;
$font_large_s:18px;
$font_large:20px;
 

mixin.scss

// 定义mixin方法的文件。
@charset "utf-8";
@import "./varibale.scss";/*引入配置*/
@mixin font_size($size){/*通过该函数设置字体大小，后期方便统一管理；*/
  @include font-dpr($size);
}
@mixin font_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
	color:$color;
  [data-theme="theme1"] & {
    color:$font-color-theme1;
  }
  [data-theme="theme2"] & {
    color:$font-color-theme2;
  }
  [data-theme="theme3"] & {
    color:$font-color-theme3;
  }
}
@mixin bg_color($color){/*通过该函数设置主题颜色，后期方便统一管理；*/
  background-color:$color;
  [data-theme="theme1"] & {
    background-color:$background-color-theme1;
  }
  [data-theme="theme2"] & {
    background-color:$background-color-theme2;
  }
  [data-theme="theme3"] & {
    background-color:$background-color-theme3;
  }
}

@mixin bg_img($img){/*通过该函数设置主题颜色，后期方便统一管理；*/
    background-image:$background-image;
    [data-theme="theme1"] & {
        background-image:$background-image-theme1;
    }
    [data-theme="theme2"] & {
        background-image:$background-image-theme2;
    }
}
/*px转rem*/
@mixin px2rem($property,$px,$px2:false,$px3:false,$px4:false){
	$rem:75px;/* 设计稿尺寸/10 */
  @if $px and $px2 and $px3 and $px4 {
    #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem ($px3 / $rem) + rem ($px4 / $rem) + rem;
  }
  @else if $px and $px2 {
		#{$property}: ($px / $rem) + rem ($px2 / $rem) + rem;
		//[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem ($px2 * 1.4 / $rem) + rem;}
	}
	@else{
		#{$property}: ($px / $rem) + rem!important;
		//[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem;}
	}
}
 
/*根据dpr计算font-size*/
@mixin font-dpr($font-size){
	font-size: $font-size;
	//[data-model="pad"] & { font-size: $font-size * 1.4; }
	[data-dpr="2"] & { font-size: $font-size * 2;}
	[data-dpr="3"] & { font-size: $font-size * 3;}
}
 

/*超行溢出显示省略号*/
@mixin overflow($num:1,$fontSize:0,$lineHeight:1.5){
  display: -webkit-box;-webkit-line-clamp:$num; overflow: hidden;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  @if $fontSize!=0 and $lineHeight{/*高度需要撑开*/
    line-height:$lineHeight;
    @if $lineHeight < 1.2 {
      line-height:1.2; /*最小需要1.2，否则在部分安卓机下第$num+1行会顶部漏出*/
    }
    height: $num * $fontSize * $lineHeight;
    [data-dpr="2"] & { height: $num * $fontSize * $lineHeight * 2!important;}
    [data-dpr="3"] & { height: $num * $fontSize * $lineHeight * 3!important;}
  }
}

用法:

vue组件

<template>
	<div id="bookcaselist">
	  <div id="content">
		<p @click="changeTheme('theme1')"></p>
		<p @click="changeTheme('theme2')"></p>
		<p @click="changeTheme('theme3')"></p>
	  </div>
	  <div class="aaaa">
		
	  </div>
	  <div class="aaaa1">
		
	</div>
	  <span>
		aaaa
	  </span>
	</div>
  </template>
  <script>
  export default {
	name: 'mine',
	data () {
		return {
		}
	},
	methods: {
		changeTheme (theme) {
			localStorage.setItem('data-theme',theme)
			window.document.documentElement.setAttribute('data-theme', theme)
		}
	},
	components: {
	}
  }
  </script>
  <style scoped="" lang="scss">
	@import "@/assets/styles/testfile/mixin.scss";	
	#content{
		overflow: hidden;
	}
	p{
		@include px2rem(width,100px);
		@include px2rem(height,100px);
		@include px2rem(margin,20px);
		float:left;
	}
	.aaaa{
		@include px2rem(width,200px);
		@include px2rem(height,200px);
		@include px2rem(margin,20px);
		@include bg_color($background-color-theme);		
	}
	.aaaa1{
		@include px2rem(width,200px);
		@include px2rem(height,200px);
		@include px2rem(margin,20px);
		@include bg_img($background-image);		

	}
	span{
		@include font_color($font-color-theme);
	}
	p:first-child{
	  	background-color:red;
	}
	p:nth-child(2){
	  background-color:#652BF5;
	}
	p:last-child{
	  background-color:deepskyblue;
	}
  </style>

这里为了保证刷新时修改的样式存在，在这里使用了localStorage存储

所以需要每次在加载时重新设置:main.js 添加设置

window.document.documentElement.setAttribute('data-theme', localStorage.getItem('data-theme')?localStorage.getItem('data-theme'):'')