前言
自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。
由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）
复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。
举例：同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。
自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。
如：–main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。
自定义属性受级联的约束，并从其父级继承其值。
浏览器兼容情况：
1. 变量的声明
声明一个自定义属性，属性名需要以两个减号（–）开始，属性值则可以是任何有效的CSS值。
和其他属性一样，自定义属性也是写在规则集之内的，如下：
element { --main-bg-color: brown; }
注意：规则集所指定的选择器定义了自定义属性的可见作用域。
通常的最佳实践是定义在根伪类 :root 下，这样就可以在HTML文档的任何地方访问到它了：
:root { --main-color: red; --bg-color: pink; --main-font-size: 15px; }
然而这条规则不是绝对的，如果有理由去限制你的自定义属性，那么就应该限制。
注意：自定义属性名是大小写敏感的。 --my-color 和 --My-color 会被认为是两个不同的自定义属性。
2. var() 函数
读取变量
.wrap{ color: var(--main-color); }
使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。
.wrap{ height: var(--el-height,400px); font-family: var(--font-stack, "Roboto", "Helvetica"); padding:var(--pad, 10px 20px); }
变量的声明
:root { --length: 400px; --mian-width:var(--length); }
注意：变量值只能用作属性值，不能用作属性名。
.foo { --side: margin-top; var(--side): 20px; /* 无效 */ }
3. 变量值的类型
如果变量值是一个字符串，可以与其他字符串拼接。
:root { --content: 'CSS'; }
.wrap::after{ content:'hello' var(--content); }
如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接。
.wrap{ --gap: 20; margin-top: var(--gap)px; /* 无效 */ margin-bottom: calc(var(--gap) * 1px); }
如果变量值带有单位，就不能写成字符串。
/* 无效 */ .wrap { --foo: '20px'; font-size: var(--foo); } /* 有效 */ .wrap { --foo: 20px; font-size: var(--foo); }
4. 作用域
同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。
<style> :root { --color: blue; } span { --color: green; } #title { --color: red; } </style>
<p>蓝色</p> <span>绿色</span> <div id="title">红色</div> p { color: var(--color); } span{ color: var(--color); } #title{ color: var(--color) ; }
上面代码中，三个选择器都声明了–color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。
这就是说，变量的作用域就是它所在的选择器的有效范围。
由于这个原因，全局的变量通常放在根元素 :root 里面，确保任何选择器都可以读取它们。
:root { --main-color: #06c; }
5. 响应式布局
CSS 是动态的，页面的任何变化，都会导致采用的规则变化。
利用这个特点，可以在响应式布局的 media 命令里面声明变量，使得不同的屏幕宽度有不同的变量值。
body { --primary: #7F583F; --secondary: #F7EFD2; } a { color: var(--primary); text-decoration-color: var(--secondary); } @media screen and (min-width: 768px) { body { --primary: #F7EFD2; --secondary: #7F583F; } }
6. JavaScript 操作
JavaScript 也可以检测浏览器是否支持 CSS 变量。
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { console.log('support') } else { console.log('not support') }
JavaScript 操作 CSS 变量的写法如下：
// 设置 Dom 节点上的 CSS 变量 el.style.setProperty("--bg-color", 'yellow'); // 读取变量（好像只能读取元素通过setProperty设置的，不能读取根元素 :root 里的） document.body.style.getPropertyValue('--primary').trim(); // 获取任意 Dom 节点上的 CSS 变量（能读取元素通过setProperty设置的和根元素 :root 里的） getComputedStyle(el).getPropertyValue("--bg-color").trim(); // 删除变量（好像只能删除元素通过ssetProperty设置的，不能删除根元素 :root 里的） el.style.removeProperty('--bg-color');
7. 兼容性处理
对于不支持 CSS 变量的浏览器，可以采用下面的写法。
a { color: #7F583F; color: var(--primary); }
也可以使用 @support 命令进行检测。
@supports ( (--a: 0)) { /* support */ } @supports ( not (--a: 0)) { /* not support */ }
