vue中利⽤scss实现整体换肤和字体⼤⼩设置
css 属性选择器
⼀、前⾔
　利⽤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;//背景主题颜⾊2
$background-color-theme3: deepskyblue;//背景主题颜⾊3
$background-color-themesec: #edc148;//背景次要主题颜⾊
//字体⼤⼩定义
$font_size_12:12px;
$font_size_14:14px;
$font_size_16:16px;
$font_size_18:18px;
$font_size_20:20px;
//字体调整的差量
$size:0;
$size_4:1px;
$size_6:2px;
$size_8:3px;            　
　2.使⽤@mixin封装对应的⽅法，这些⽅法都通过@include  ⽅法名(arg) 来实现调⽤.  　
@mixin font_color($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 add_size($val,$size){
//这⾥我的$size分了三种⼤⼩分别为1px,2px,3px进⾏差量增加，再根据不同的dpr来加载不同的css
[data-size="0"][data-dpr="1"] & {
font-size:($val+$size) * 1.8 ;  }
[data-size="4"][data-dpr="1"] & {    font-size:($val+$size_4) * 1.8 ;  }
[data-size="6"][data-dpr="1"] & {    font-size:($val+$size_6) * 1.8 ;  }
[data-size="8"][data-dpr="1"] & {    font-size:($val+$size_8) * 1.8 ;  }
[data-size="0"][data-dpr="2"] & {    font-size:($val+$size) * 1.8 ;  }
[data-size="4"][data-dpr="2"] & {    font-size:($val+$size_4) * 1.8 ;  }
[data-size="6"][data-dpr="2"] & {    font-size:($val+$size_6) * 1.8 ;  }
[data-size="8"][data-dpr="2"] & {    font-size:($val+$size_8) * 1.8 ;  }
[data-size="0"][data-dpr="3"] & {    font-size:($val+$size) * 1.8 ;  }
[data-size="4"][data-dpr="3"] & {    font-size:($val+$size_4) * 1.8 ;  }
[data-size="6"][data-dpr="3"] & {    font-size:($val+$size_6) * 1.8 ;  }
[data-size="8"][data-dpr="3"] & {    font-size:($val+$size_8) * 1.8 ;  }
}
3.字体调整⽅法的调⽤
4.主题的更换
根据changeTheme⽅法传⼊的参数，改变更节点中data-theme的属性值。当调⽤到bg_color()⽅法时使⽤[]css属性选择器进⾏'判断'加载对应的样式（其它⽅法同理）
三、总结
  1.字体⼤⼩和换肤
  2.在设置字体⼤⼩时，适配不同分辨率屏幕及初始化字体的适配
  2.保存设置操作后，初始化时应该先动态添加根节点的属性data-theme、data-size、data-dpr

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。