在小程序开发过程中,基于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自动执行相应样式。