在小程序開發(fā)過程中,基于Vue如何使用scss實現(xiàn)換膚(更換主題)功能的開發(fā)?
創(chuàng)軟小程序開發(fā)團隊經(jīng)過梳理后簡單整理如下。
$color-primary:#fa436a; /* 主題顏色 */ $color-primary-green:green; /* 更換的顏色 */ $color-primary-blue:blue; /* 更換的顏色 */ @mixin color_primary($color){/*通過該函數(shù)設(shè)置字體顏色,后期方便統(tǒng)一管理;*/ 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); /* 采用函數(shù)調(diào)用 */ }
window.document.documentElement.setAttribute('data-theme', 'green'); /* */
通過設(shè)置html的attribute屬性在封裝的函數(shù)中進行判斷,進行相應(yīng)的設(shè)置不同的顏色
css中 [ ] 可以識別到在html標簽上設(shè)置的屬性,所以在html上對應(yīng)屬性發(fā)生變化時,就會執(zhí)行相應(yīng)的樣式,
這一步有點類似于平時給div添加一個.active屬性,css自動執(zhí)行相應(yīng)樣式。