前言

自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。
由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）
复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。
举例：同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。
自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。
如：–main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。
自定义属性受级联的约束，并从其父级继承其值。

浏览器兼容情况：

讯享网

1. 变量的声明

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 { 
    --main-color: #06c; } 

5. 响应式布局

讯享网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 */ }