动态修改css中:root定义的变量-换肤、主题色

html-css012

动态修改css中:root定义的变量-换肤、主题色,第1张

前端中有用到需要设置主题颜色，根据用户喜欢实现换肤的可以使用css中:root定义变量的方式，或者使用动态切换引入的外部css样式表实现，这里着重记录下动态修改css中:root定义的变量实现换肤：

这里定义变量必须是以'--'开头，然后其他页面的样式表就可以直接引用这个变量了

至此就完成了动态修改:root变量实现换肤了，具体的应用场景中我们应该是在页面上操作，选中需要的肤色然后修改:root定义的变量值，考虑到浏览器刷新会重置原始状态的值，这里要结合本地存储方式记住选中的肤色，具体的实现参考：

我们在写样式的时候，可能一个app内的颜色，比如#00ff00，假设这个颜色我用了100次，穿插写在不同的页面里。当需要修改这个主题的时候，会让人抓狂。

所以我们可以使用变量来优化。

在html, css里面，它原始的定义方式及使用方法是这样的

其中，:root是根元素选择器，也就是<html>元素。在这里面定义的变量，可以在整个页面进行使用。

使用的时候，用var()函数进行调用。

注意：约定变量名须以两个连字符'--'开头

在小程序中，用法基本也是一样的：

我们在wxss页面中进行定义

注意，page选择器是选中整个页面，前面是没有'.'号的。这是wxss系统自带的选择器。可以看到，用法和css原始用法差别不大。

你也可以在wxml里面直接使用！

这个wxss变量，既可以在每个页面mypage.wxss里面的page里声明，

，就能在所有页面里使用。

css是可以支持变量，且所有主流浏览器都支持。css变量又称"css自定义属性",css的变量声明是以“--”前缀，而前缀是"$"或"@"被预处理器sass或less占用，所以，css以"--"开头可以避免与预处理器产生冲突,

2.属性名可以包含数字，字母，以及下划线或者短横线，也可以是中文，日文或者韩文，但不能是属性名或数字开头，不能包含$，[，^，(，%等字符。

3.变量--primary只能用属性值，不能用作属性名

4.数字和单位直接写一起需使用calc()函数

拓展

cal()函数支持 "+", "-", "*", "/" 运算，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数使用标准的数学运算优先级规则；

5.变量的值是字符串时，可以直接拼接

6.var()函数第二个参数是设置默认值，若该变量不存在，则使用此默认值

7.css变量可以在任意选择器中使用包括在标签元素style及@media中

若想了解更深可看大神文章：

https://www.ruanyifeng.com/blog/2017/05/css-variables.html

https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/