vue中利用sass實現整體換膚和字型大小設定
阿新 • • 發佈:2018-12-03
一、前言
利用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