言明，本文實現的動態換膚並非elementui官網那種隨意用colorpicker實時更改主題的效果，而是為系統預設的幾種主題事先配置顏色，然後線上觸發更改主題的事件。
首先感謝luanxiyuan老師的博文引導。
此方案涉及sass的map遍歷、函式定義、map訪問、混合器等相關知識，具體api詳參官網
大概的思路就是給html根標籤設定乙個data-theme屬性，通過js切換data-theme的屬性值，sass根據此屬性來判斷使用對應主題變數。
具體實現步驟，以我的v5系統（dark、light）兩種主題為例。
1.定義乙個sass檔案_themes.scss，存放系統中兩種主題的相關顏色變數，檔案位置可以放在style或者assets目錄下，**如下
//定義全域性主題&顏色的map陣列，鑑於v5只有白天和晚上的主題，此處僅定義這兩種
//切記 所有顏色一式兩份兒，務必保證key值統一，key值可以自定義，注意避免$%_之類的，
//與sass自有符號衝突，見文知意即可
//另外如果基於其他ui框架，如本專案基於element-ui，則只需設定一套dark主題，
//data-theme為dark時，樣式引用dark
//data-theme為其他值時，自然就採用了elementui的預設樣式
$themes: (
light: (
font_color1: rgb(196, 193, 193),
font_color2: rgb(110, 109, 109),
background_color1: rgb(255, 0, 21),
background_color2: rgb(87, 87, 226),
border_color1: rgb(231, 181, 181),
border_color2: rgb(9, 255, 0)
),dark: (
font_color1: rgb(226, 222, 222),
font_color2: rgb(255, 255, 255),
background_color1: rgb(87, 87, 226),
background_color2: rgb(255, 0, 21),
border_color1: rgb(9, 255, 0),
border_color2: rgb(231, 181, 181)
));
注意，scss檔名建議用下劃線開頭，如_themes.scss，防止執行時被編譯成單獨的css檔案，詳參sass中文教程（3.1 sass檔案匯入）。
2.定義另外乙個sass檔案_handle.scss來操作1中的$theme變數（當然兩個檔案可以合併，分開寫是想把配置和操作解耦），上**：
@import "@/style/_themes.scss";
//此處用了sass的map遍歷、函式、map訪問、混合器等相關知識，
//詳細api參考
//遍歷主題map
@mixin themeify 是sass的插值表示式
//& sass巢狀裡的父容器標識 @content是混合器插槽，像vue的slot
[data-theme="#"] &
}}//宣告乙個根據key獲取顏色的function
@function themed($key)
//暫時想到的常用的開發場景下面三種背景顏色、字型顏色、邊框顏色 至於陰影什麼之類的忽略了
//獲取背景顏色
@mixin background_color($color)
}//獲取字型顏色
@mixin font_color($color)
}//獲取邊框顏色
@mixin border_color($color)
}
3.具體在vue中使用，直接引入對應混入器就好，取哪個顏色，傳哪個key，就這麼簡單
這裡是頁面
白天晚上
export default
}};
Vue element sass實現動態換膚
本篇文章的使用場景就是在vue element sass的專案中實現動態換膚的需求，先宣告一下，這裡所說的換膚，是事先定義好的主題樣式，並非根據乙個colorpicker隨意拾取的顏色進行實時換膚。我這裡實現的方法比較笨，但也不失為著實可行的一套解決方案。因為實現我也在網上扒了好久，多數張冠李戴對不...
hybird之web動態換膚實現
前言 最近在重構個hybird 原生的殼包著web頁面 的ui框架，進行到了做換膚功能的階段，所以這裡是我思考的解決的方法。預想 目前實現換膚的功能無非就兩種做法。1.寫幾個 檔案，然後切換使用這幾個檔案達到換膚的目的。不得不說這是最常見的方式，效果也比較明顯，但是它有幾個缺點。缺點 1.如果更改乙...
hybird之web動態換膚實現
前言 最近在重構個hybird 原生的殼包著web頁面 的ui框架，進行到了做換膚功能的階段，所以這裡是我思考的解決的方法。預想 目前實現換膚的功能無非就兩種做法。1.寫幾個 檔案，然後切換使用這幾個檔案達到換膚的目的。不得不說這是最常見的方式，效果也比較明顯，但是它有幾個缺點。缺點 1.如果更改乙...