前言
大家都听说过变量，我们学习的任何语言都有变量的存在。 css中是否也存在变量呢？ 也许很多小伙伴也是通过less,scss中来使用css变量 其实在css中也是有变量的，今天我们也来学习一下。
为什么要使用变量
变量有一个很大的作用就是降低维护成本。 不仅如此，还可以提高我们的开发效率。 实现改一个，而改全部。是不是爽歪歪。 使用变量的优势： 假如我们确定了项目的主题色， 然后在各个 CSS 代码中使用该了主题色， 如果后期主题色变了，那岂不是所有 CSS 代码都得更改一遍。 这样的话累死我们呀！ 假如我们用变量将该主题色存储起来， 后续 CSS 代码中直接使用变量即可， 需要更改主题色时，直接更改变量值即可。
自定义属性[css变量]的简单介绍
自定义属性（有时候也被称作 CSS 变量或者级联变量）是由 CSS 作者定义的。 它包含的值可以在整个文档中重复使用。 css的自定义属性[css变量]是有要求的，需要以--开头。 声明变量： --main-color: black; // css变量的自定义属性是有要求的需要以--开头。 由 var() 函数来获取值比如：color: var(--main-color);
变量的使用
<head> <style> :root { --bgColor: rgb(9, 246, 246); } div { /* 上下面的代码等价于 background-color:rgb(9, 246, 246) */ background-color: var(--bgColor); width: 100px; height: 100px; } </style> </head> <body> <div></div> </body>
对上面代码的分析 ：root
上段代码中我们定义了一个 bgColor 变量， 需要注意的是我们需要在自定义属性前面加上--才算是变量， 这算是 CSS 变量的声明规则。 自定义属性值 rgb(9, 246, 246) 就是我们的变量值。 上面的:root 是一个伪类，它相当于一个全局作用域。 我们都知道变量是有作用域的概念的。 声明在:root 伪类中的变量可以在全局 CSS 代码中使用。 简单点说：如果要声明全局所有元素都能使用的话，可以设置到根伪类:root下： :root { --bgColor: rgb(9, 246, 246); }
变量命名规则
不能包含 $,[,^,(,%等字符 普通字符局限在只要是 “数字[0-9]” “字母[a-zA-Z]” “下划线_” 和 “短横线-” 这些组合 可以是中文，日文或者韩文 变量值只能用作属性值，不能用作属性名，比如下方代码我们是不允许的： 特别需要注意的是【变量名】必须以 “--”开头哈 .foo { --side: margin-top; /* 无效 */ var(--side): 20px; }
5.换肤原理
<head> <style> :root { --theme: yellow; } .box { width: 100px; height: 100px; background-color: var(--theme); } </style> </head> <body> <div class="box" id="contShow"></div> <button id="btn1">切换黑色主题</button> <button id="btn2">切换黄色主题</button> </body> <script> let box = document.getElementById('contShow') let btn1 = document.getElementById('btn1'); let btn2 = document.getElementById('btn2'); btn1.addEventListener('click', () => { box.style.setProperty('--theme', '#000'); }) btn2.addEventListener('click', () => { box.style.setProperty('--theme', 'yellow'); }) </script>
发现问题
我们都知道，在实际的过程中不可能只会有这么一个颜色。 https://varlet.gitee.io/varlet-ui/#/zh-CN/row 可以参考一下这个换肤效果。如果有时间这周写一个简单的切换皮肤的demo效果
