vue中利用scss实现整体换肤和字体大小设置

一、前言

　利用Sass预处理实现换肤和字体大小调整。

　思路及达到的效果：字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制。页面初始化是的字体适配可以根据devicePixelRatio和css3 media进行适配.

　实现方法：1.利用全局变量和bus事件，使用js方式调整字体和颜色(这里暂不讨论);

　　　　　　2.利用scss预处理方式实现

　　　　　　　　主题更换：使用setAttribute()为html根节点添加属性，根据属性的值再进行不同主题的切换;

　　　　　　　　字体大小的调整：

　　　　　　　　　　第一种方法利用不同的class名调用相应的方法传入不同的参数进行控制，对不同的字体进行差量调整（优点：可以对不同的字体大小进行调整，缺点：class可能会很多);

　　　　　　　　　　第二种方法利用一个方法、一个参数进行整体（优点：方法、参数简单，缺点：只能对一种字体大小进行调整）.

　　　　　　这里采用第一种方式进行实现。

二、实现步骤

　　Sass的安装和环境配置不做介绍

　　demo文件目录：

　　

　　1.自定义的一些变量　

　　

//颜色定义
$background-color-theme: #2474a5;//背景主题颜色默认
$background-color-theme1: red;//背景主题颜色1
$background-color-theme2: #652BF5;/