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;//背景主題顏色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