发帖
8 0 1

网页换肤原来如此简单

花花
金牌会员

24

主题

17

回帖

2343

积分

金牌会员

积分
2343
爱星物联IoT云平台 700 8 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

──── 0人觉得很赞 ────
图片12.png

使用道具 举报

2024-3-12 17:45:45
2024-3-13 09:23:17
不错呢
2024-3-13 10:10:20
2024-3-14 10:13:23
赞一下
2024-3-14 13:26:28
赞一下
2024-3-14 20:56:25
2024-3-14 22:20:14
2024-3-14 22:27:41
您需要登录后才可以回帖 立即登录
高级模式
返回
统计信息
  • 会员数: 28073 个
  • 话题数: 39663 篇