一、前言

　利用Sass預處理實現換膚和字型大小調整。

　實現方法：1.利用全域性變數和bus事件，使用js方式調整字型和顏色(這裡暫不討論);

　　　　　　2.利用Sass預處理方式實現

　　　　　　　　主題更換：使用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;
 

　　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){
  font-size:$val+$size ; //預設時的font-size
  [data-size="4"] & {
    font-size:$val+$size_4 !important;
  }
  [data-size="6"] & {
    font-size:$val+$size_6 !important;
  }
  [data-size="8"] & {
    font-size:$val+$size_8 !important;
  }
}

3.字型調整方法的呼叫

4.主題的更換

根據changeTheme方法傳入的引數，改變更節點中data-theme的屬性值。當呼叫到bg_color()方法時使用[]css屬性選擇器進行'判斷'載入對應的樣式（其它方法同理）

 三、其它注意事項

　　1.本文沒有對dpr進行字型大小適配，初始化時預設dpr為1

　　2.儲存設定操作後，初始化時應該先動態新增根節點的屬性data-theme、data-size