目录
一.什么是css变量
二.背景
三.作用
四.使用方法
4.1 声明
4.2 使用
4.3 默认值
4.4 CSS自定义属性作用域：
4.5 CSS变量的空格尾随特性：
4.6 配合calc方法使用
4.7 CSS自定义属性可以在行内style属性中使用
4.8 在 js 中操作
五.主题变换实例
一.什么是css变量
自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(--main-color);）
二.背景
- 原生 CSS 在代码复用方面有所欠缺，例如典型的例子 - 主题，每一个
font-size、color、border等属性值必须重复编写，若有改动则每一处都要修改。 font-size、color等单纯就是一个值，就像魔术数字，没有语义。- 比较难使用 JS 动态修改，使用 class 不够明确，使用 style 又不能修改
::after等伪元素。
三.作用
我们的项目中有很多CSS文件时，无形中增加了维护成本。即便使用了CSS框架，虽然这些框架都有可能引入了Sass这样的CSS处理器帮助我们减少了出错的机会，提高了可维护性的能力，但这种通过添加额外步骤的方式（需要做编译处理），可能会增加系统的复杂性。
CSS自定义属性的出现，为我们带来了一些CSS处理器的便利，并且不需要额外的编译。在CSS中使用CSS自定义属性的好处和在编写语言中使用变量的好处没有特别的不同之处。W3C规范上有过这样的一段描述：
使用CSS自定义属性使得大文件更易于阅读，因为看起来很随意的值有了一个提示信息的名字，并且编辑这些文件更加简单，更不易于出错。因为你只需要在自定义属性处修改一次，这个修改就会应用到使用该自定义属性的任何地方。
另外，CSS自定义属性除了提供了更灵活的设置、引用和修改的便利性之外，还具有较强的语义化（比如primary这样的名称总是要比red这样的名称来得有意义）。这些语义化信息让你的CSS文件变得易读和理解。
为此，可读性和可维护性是CSS自定义属性最大的优势。并且，它让我们可以在CSS中使用原生的变量，而不再需要借助于类似Sass这样的CSS处理器。
四.使用方法
4.1 声明
声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。
通常的最佳实践是定义在根伪类 :root 下，这样就可以在HTML文档的任何地方访问到它了：
/*:root 选择器匹配文档根元素。*/
/*在 HTML 中，根元素始终是 html 元素。*/
/*也就是说：root 表示的是根元素*/
:root {
--main-bg-color: brown;
}注意：自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的自定义属性。
同时不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文。
4.2 使用
element {
background-color: var(--main-bg-color);
}4.3 默认值
用 var() 函数可以定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换。
/*如果提供了第二个参数，则表示备用值，当自定义属性值无效时生效。第二个参数可以嵌套，但是不能继续平铺展开下去了，例如：*/
.two {
color: var(--my-var, red);
}
.three {
background-color: var(--my-var, var(--my-background, pink));
}
.three {
background-color: var(--my-var, --my-background, pink);
}第二个例子展示了如何处理一个以上的 fallback。该技术可能会导致性能问题，因为它花了更多的时间在处理这些变量上。
4.4 CSS自定义属性作用域：
在 JavaScript 中，变量有作用域一说。它们可能是全局作用域，也有可能是局部作用域。那么在CSS中，CSS自定义属性也有这样的说法。
:root (等同于html)选择器可以选择到 DOM 元素中或 document 树中最高顶级的元素。因此，在 :root 选择器中声明的CSS 自定义属性，其作用域的范围是全局范围，也就是全局作用域。局部作用域就是它所在的选择器的有效范围。
同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。
4.5 CSS变量的空格尾随特性：
body {
--size: 20;
font-size: var(--size)px;
}此处font-size:var(--size)px等同于font-size:20 px，注意，20后面有个空格，所以，这里的font-size使用的是<body>元素默认的大小。 请安4.6给出的建议方法使用
4.6 配合calc方法使用
CSS 自定义属性不能像 Sass 这样的处理器一样直接做一些数学计算。如果你需要做一些数据计算，那么就要使用 CSS 的 calc() 函数。
.margin {
--space: calc(20px * 2);
font-size: var(--space);
}
/*或者*/
body {
--size: 20;
font-size: calc(var(--size) * 1px);
}4.7 CSS自定义属性可以在行内style属性中使用
CSS自定义属性和CSS属性一样，可以在元素的style属性中使用CSS自定义属性。
<!-- HTML -->
<button style="--color: blue">Click Me</button>
// CSS
button {
border: 1px solid var(--color);
}
button:hover {
background-color: var(--color);
}4.8 在 js 中操作
在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");
// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);五.主题变换实例
<!DOCTYPE html>
<html lang="en" id="b" theme=" ">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
html[theme="dark"]{
--div-width:400px;
--div-color:seagreen;
color:wheat;
}
:root{
--div-width:500px;
--div-color:red;
color: #000;
}
#a{
width: var(--div-width);
height:var(--div-width);
background-color: var(--div-color);
}
</style>
<script>
function a(){
if(document.getElementById("b").attributes["theme"].nodeValue=="dark"){
document.getElementById("b").attributes["theme"].nodeValue = " "
}else{
document.getElementById("b").attributes["theme"].nodeValue = "dark"
}
}
</script>
<body>
<button type="button" onclick=a()>点击切换主题</button>
<div id="a" >111</div>
</body>
</html>这以上代码我写了一个html选择器和:root选择器，可以写两个:root选择器，但是会导致选择器特性一致，因此不建议这么写，html标签里的theme也是自定义的随便写，此种方法减少了频繁操作，准备了两套主题通过简单的语句进行切换。
