基于vue和scss采用uniapp开发主题皮肤更换的实现

在小程序开发过程中，基于Vue如何使用scss实现换肤(更换主题)功能的开发？

创软小程序开发团队经过梳理后简单整理如下。

首先，.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); /* 采用函数调用 */
}

最后，在js中设置更换皮肤

window.document.documentElement.setAttribute('data-theme', 'green'); /* */

Vue中如何使用scss实现换肤功能的主要原理

通过设置html的attribute属性在封装的函数中进行判断，进行相应的设置不同的颜色

css中 [ ] 可以识别到在html标签上设置的属性，所以在html上对应属性发生变化时，就会执行相应的样式，

这一步有点类似于平时给div添加一个.active属性，css自动执行相应样式。