
在小程序開發過程中,基于Vue如何使用scss實現換膚(更換主題)功能的開發?
創軟小程序開發團隊經過梳理后簡單整理如下。
$color-primary:#fa436a; /* 主題顏色 */
$color-primary-green:green; /* 更換的顏色 */
$color-primary-blue:blue; /* 更換的顏色 */
@mixin color_primary($color){/*通過該函數設置字體顏色,后期方便統一管理;*/
color:$color;
[data-theme="green"] & {
color:$color-primary-green;
}
[data-theme="blue"] & {
color:$color-primary-blue;
}
}
/* 更換背景顏色采用上面一樣的邏輯 */
.price{
/*color: $color-primary;*/ /* 原始引用方式,錯誤 */
@include color_primary($color-primary); /* 采用函數調用 */
}
window.document.documentElement.setAttribute('data-theme', 'green'); /* */
通過設置html的attribute屬性在封裝的函數中進行判斷,進行相應的設置不同的顏色
css中 [ ] 可以識別到在html標簽上設置的屬性,所以在html上對應屬性發生變化時,就會執行相應的樣式,
這一步有點類似于平時給div添加一個.active屬性,css自動執行相應樣式。