网页换肤原来如此简单

[复制链接]
查看270 | 回复9 | 2024-3-12 17:18:24 | 显示全部楼层 |阅读模式
本帖最后由 花花 于 2024-3-12 17:17 编辑

上周我们给网页做了精装修:

昨天还喜欢蓝色,今天就拥抱绿色了,情绪来得太快就像龙卷风,五彩缤纷我都想要。。。
图片1.png

上次教程说到可以通过CSS的属性改变颜色值,如color、background-color、border-color等等。

小萌新举手说:“我知道,直接把属性的值改了,颜色就变了。”
“咳咳……真聪明!!如果我有十个页面,每个页面有20个颜色值,给你多长时间能改好呢?”
小萌新掰着手指头数,嘴里嘟囔着:“一个1秒钟,20*10,200秒,除以60,……分”
“分你个大头鬼,等你改好,我心情早变成流光溢彩的白了!”
“呃……”
图片2.png

这就得说回上次说到的LESS了。

图片3.png

它是CSS,只是多了一点东西。

这个东西是什么呢?本次换肤就用上了。


图片4.png
以上就是LESS比CSS多出来的扩展。

这次我们用变量来实现快速换肤。

打开代码目录src - styles - global.less 文件,可以看到里面已经定义了一些变量。当然,根据自己需要也可以自己定义样式变量。
图片5.png

在main.js文件引入了这个全局变量。
图片6.png

接下来,我们把页面的颜色换成变量值。
图片7.png 图片8.png
图片9.png 图片10.png

将颜色的属性值换成变量后,该属性即展现了变量配置的颜色。

如果我直接将主题色换成了绿色,效果会怎么样呢?
图片11.png

噔噔蹬蹬……
图片15.png

没想到吧?除了底部按钮,其他组件的颜色怎么也变成绿色了呢?

因为这个组件库的变量也调用了全局变量的。所以只要改了@theme-color变量的值,所有调用这个变量的值都会随之改变。
图片13.png

没想到换肤这么简单吧??萌新们学起来吧~

哪管客户要五彩斑斓的黑,还是流光溢彩的白,咔咔咔几秒钟,搞定!

图片14.png

图片12.png
Less is more.
回复

使用道具 举报

1084504793 | 2024-3-12 17:45:45 | 显示全部楼层
回复

使用道具 举报

WT_0213 | 2024-3-13 09:23:17 | 显示全部楼层
不错呢
回复

使用道具 举报

lazy | 2024-3-13 10:10:20 | 显示全部楼层
回复

使用道具 举报

hdydy | 2024-3-13 11:06:46 | 显示全部楼层
打卡学习
回复

使用道具 举报

noonezero | 2024-3-14 10:13:23 | 显示全部楼层
赞一下
回复

使用道具 举报

timo | 2024-3-14 13:26:28 | 显示全部楼层
赞一下
回复

使用道具 举报

物联网 | 2024-3-14 20:56:25 | 显示全部楼层
回复

使用道具 举报

7788 | 2024-3-14 22:20:14 | 显示全部楼层
回复

使用道具 举报

知行合一 | 2024-3-14 22:27:41 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则