CSS 中的新玩意自定义属性（变量）基本用法：声明：使用双减号定义，属性值可以使用任何有效果的css值; 但需要注意

CSS 中的新玩意自定义属性（变量）在进年来我们习惯了scss、less 等各种语法上的骚操作。最近发现css本身也支持了这种变量的用法

基本用法：

声明：使用双减号定义，属性值可以使用任何有效果的css值; 但需要注意以下两点：

但必须定义在规则级内（就是必须定义在某个样式内部，与scss、less等不同，不能直接定义在顶部）
自定义属性名是大小写敏感的，--my-color 和 --My-color 是两个不同的自定义属性。

/**:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。**/
:root {
    --main-bg-color: brown;
}
body{
    --main-bg-color: #f00;
    --font-size: 16px;
}

使用：使用var()函数来调动

var函数允许使用默认的方式

.two {
  background-color: var(--main-bg-color);
}
.three {
  background-color: var(--my-var, red);
}

属性继承

一般的使用场景基本都是做全局的变量使用了，也就不存在继承一说。但如果在一个元素父级以上的多级定义会按以下匹配方式匹配

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

在以上情况下， var(--test) 的结果分别是：对于元素 class="two" ：10px 对于元素 class="three" ：2em 对于元素 class="four" ：10px （继承自父属性）对于元素 class="one" ：非法值，会变成自定义属性的默认值

在JavaScript中使用

在js中获取或者修改 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);

其他

其他的一些特性会安装css的默认规则去匹配也不用特殊去注意例如：值无效会被忽略, 重复定义覆盖原则等