vue换肤方案scss

1.配置主题定义scss:_theme.scss

$themes: (blue: (base_color: $blue-1,light_color: rgba($blue-1, .1)),purple: (base_color: $purple-1,light_color: rgba($purple-1, .1)),cyan: (base_color: $cyan-1,light_color: rgba($cyan-1, .1)),green: (base_color: $green-1,light_color: rgba($green-1, .1)),magenta: (base_color: $magenta-1,light_color: rgba($magenta-1, .1)),lime: (base_color: $lime-1,light_color: rgba($lime-1, .1)),red: (base_color: $red-1,light_color: rgba($red-1, .1)),orange: (base_color: $orange-1,light_color: rgba($orange-1, .1)),yellow: (base_color: $yellow-1,light_color: rgba($yellow-1, .1)),volcano: (base_color: $volcano-1,light_color: rgba($volcano-1, .1)),geekblue: (base_color: $geekblue-1,light_color: rgba($geekblue-1, .1)),gold: (base_color: $gold-1,light_color: rgba($gold-1, .1)))

2.主题切换scss: _handle.scss

//主题切换@import "./_theme";@mixin themeify {@each $theme-name,$theme-map in $themes {$theme-map: $theme-map !global;[data-theme="#{$theme-name}"] & {@content;}}
}//声明一个根据Key获取颜色的function
@function themed($key) {@return map-get($theme-map, $key);
}//获取背景颜色
@mixin background_color($color) {@include themeify {background-color: themed($color) !important;}
}//获取字体颜色
@mixin font_color($color) {@include themeify {color: themed($color) !important;}
}//获取边框颜色
@mixin border_color($color) {@include themeify {border-color: themed($color) !important;}
}

3.引入sass-resources-loader

yarn add sass-resources-loader --save

4.我是使用脚手架搭建项目，所以在webpack.base.conf.js增加配置，使用公共scss

5.在index.html中或者app.vue中设置/切换属性

6.在vue文件中使用_handle.scss中的方法设置需要换肤改变颜色的元素

这样基本的换肤就完成啦

vue换肤方案scss相关推荐

最成熟的前端换肤方案（主题切换）
前言在网上找了很多的换肤方案,其中我认为写的最好的也是有demo 的无疑是这篇,但是同时也发现了一些问题,就是太多方案不知道选哪个,而且没有做持久化处理,并且没有把图片切换的代码放在一起.我这边的需 ...
换肤方案,换肤策略,App插件式换肤实现方案
UI换皮肤或白天黑夜模式,从产品上来看,是两种不同产品设计模式:白天黑夜模式只有两种模式:而换皮肤可以有多套,可以进行商业化,并盈利. 换肤的本质就是去替换资源文件.我们知道,Android应用程序由 ...
Android可更换布局的换肤方案
换肤,顾名思义,就是对应用中的视觉元素进行更新,呈现新的显示效果.一般来说,换肤的时候只是更新UI上使用的资源,如颜色,图片,字体等等.本文介绍一种笔者自己使用的基于布局的Android换肤方案,不仅 ...
Android 主题切换/换肤方案研究(四) - qq和qq空间
4. qq和qq空间 (独立app) 分析时用的是: 1. 夜神android模拟器(因为用android studio自带的模拟器运行x86架构的镜像提示不能安装qq空间,安装arm架构的镜像运行又 ...
Android 应用换肤方案的总结
虽然现在已经有很多不错的换肤方案,但是这些方案或多或少都存在自己的问题.在这篇文章中,我将对 Android 现有的一些动态换肤方案进行梳理,对其底层实现原理进行分析,然后对开发一个新的换肤方案的可能 ...
对 Android 应用换肤方案的总结
作者:me 虽然现在已经有很多不错的换肤方案,但是这些方案或多或少都存在自己的问题.在这篇文章中,我将对 Android 现有的一些动态换肤方案进行梳理,对其底层实现原理进行分析,然后对开发一个新的换 ...
主流技术之网易云换肤方案
上一篇说到了View的加载过程,并且对TextView进行了拦截,让页面上所有的TextView内容都变成了我们想要的helloworld,这次我们一起来研究一下网易云音乐的动态换肤技术.说到换肤,有 ...
Android 换肤方案详解（一）
引言在我们的开发中,也许有些项目会有换肤的需求,这个时候会比较头疼怎么做才能做到一键换肤呢?大家肯定是希望只要一行代码就能调用最好.下面我们先分析一下换肤的本质是什么? 原理换肤,其本质无非就是更 ...
iOS客户端节日换肤方案探究
转自:https://www.ianisme.com的博客一.前言: tip: 本来这篇文章在圣诞节就已经准备好了,但是由于种种原因一直没有写完,今天将它写出来,也算是2018年的第一篇文章了.你好 ...

vue换肤方案scss

vue换肤方案scss相关推荐

最新文章

热门文章