这里定义变量必须是以'--'开头,然后其他页面的样式表就可以直接引用这个变量了
至此就完成了动态修改:root变量实现换肤了,具体的应用场景中我们应该是在页面上操作,选中需要的肤色然后修改:root定义的变量值,考虑到浏览器刷新会重置原始状态的值,这里要结合本地存储方式记住选中的肤色,具体的实现参考:
我们在写样式的时候,可能一个app内的颜色,比如#00ff00,假设这个颜色我用了100次,穿插写在不同的页面里。当需要修改这个主题的时候,会让人抓狂。
所以我们可以使用变量来优化。
在html, css里面,它原始的定义方式及使用方法是这样的
其中,:root是根元素选择器,也就是<html>元素。在这里面定义的变量,可以在整个页面进行使用。
使用的时候,用var()函数进行调用。
注意:约定变量名须以两个连字符'--'开头
在小程序中,用法基本也是一样的:
我们在wxss页面中进行定义
注意,page选择器是选中整个页面,前面是没有'.'号的。这是wxss系统自带的选择器。可以看到,用法和css原始用法差别不大。
你也可以在wxml里面直接使用!
这个wxss变量,既可以在每个页面mypage.wxss里面的page里声明,
,就能在所有页面里使用。
Element Plus 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。 但是如果需要大规模替换样式,例如: 将主题颜色从蓝色改为橙色或绿色,也许一个个将其覆盖起来不是一个好主意。如果您的项目也使用了 SCSS,可以直接修改 Element Plus 的样式变量。 新建一个样式文件,例如 styles/element/index.scss:
您应该使用 @use ‘xxx.scss’ as *代替 @import ‘xxx.scss’。