前言
从前有一只小白兔, 它在森林里觅食......不好意思, 跑题了!
刚工作不久, 从来没想过会做换肤的需求, 直到我在蓝湖上看到了两套样式, 于是我跑去问UI!
- 我:为什么这么对我?
- UI:人嘛,总是要成长的。
- 我:可是它看起来好难啊!
- UI: 难就不用做吗? 设计上已经很照顾你了。这样吧,你先去做,有问题你再来找我。
- 我:那我现在就有一个问题, 今天...今天星期四,能不能
V我50
OK! 我们言归正传
一、准备
1.首先我们准备好两个scss文件mixin.scss和theme.scss,当然了名字随意!
2.theme.scss此文件中我们定义一些样式, 注意样式后缀的区别, 由于项目中只用到了黑白两种色调,所以只定义了两个种类black和white, 如果多种色调切换可以自行定义。
3.mixin.scss接下来我们来看一下mixin.scss,此文件用于封装成一个mixin 把所要更换的样式统统进行封装。
二、测试
OK!以上步骤完成了, 那也就完成了,我们来试验一下!
- 首先我们准备一个
按钮
- 然后写一个
按钮的点击事件, 参数是另外一个主题
- 然后对应的div设置好样式(请忽略我的类名,
谢谢 :)
- 再然后, 我们直接点击
按钮!!!
什么? 你告诉我没有效果? 不可能! 绝对不可能。
你看看你的mixin.scss中有没有引入theme.scss?
再看看你的.vue中有没有引入mixin.scss?这回好了吧? 看看效果:
之前在其他地方也写过一篇的,如今迁移一下, 好了! 到这里, 此次分享就结束了, 如有错误的地方, 欢迎指出,我会加以改正!
:)
