本帖最后由 花花 于 2024-3-12 17:17 编辑
上周我们给网页做了精装修：
昨天还喜欢蓝色，今天就拥抱绿色了，情绪来得太快就像龙卷风，五彩缤纷我都想要。。。
上次教程说到可以通过CSS的属性改变颜色值，如color、background-color、border-color等等。
小萌新举手说：“我知道，直接把属性的值改了，颜色就变了。” “咳咳……真聪明！！如果我有十个页面，每个页面有20个颜色值，给你多长时间能改好呢？” 小萌新掰着手指头数，嘴里嘟囔着：“一个1秒钟，20*10，200秒，除以60，……分” “分你个大头鬼，等你改好，我心情早变成流光溢彩的白了！” “呃……”
这就得说回上次说到的LESS了。
它是CSS，只是多了一点东西。
这个东西是什么呢？本次换肤就用上了。
以上就是LESS比CSS多出来的扩展。
这次我们用变量来实现快速换肤。
打开代码目录src - styles - global.less 文件，可以看到里面已经定义了一些变量。当然，根据自己需要也可以自己定义样式变量。
在main.js文件引入了这个全局变量。
接下来，我们把页面的颜色换成变量值。
将颜色的属性值换成变量后，该属性即展现了变量配置的颜色。
如果我直接将主题色换成了绿色，效果会怎么样呢？
噔噔蹬蹬……
没想到吧？除了底部按钮，其他组件的颜色怎么也变成绿色了呢？
因为这个组件库的变量也调用了全局变量的。所以只要改了@theme-color变量的值，所有调用这个变量的值都会随之改变。
没想到换肤这么简单吧？？萌新们学起来吧~
哪管客户要五彩斑斓的黑，还是流光溢彩的白，咔咔咔几秒钟，搞定！
| 
