自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(--main-color);）
网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。
css 的预处理几乎已经成为 web (前端)开发的标准。css 预处理的好处之一就是可以使用变量。 这样很大程度上避免了 ctrl + c / ctrl + v，也简化了开发和重构。
我们通常用预处理来定义存储颜色、字体表现、布局细节等，几乎可以用在任意地方。·
但是预处理的变量存在一定的限制：
- 你不能动态的改变它
- 它不会顾及 DOM 结构
- 不能从 javascript 中读取或更改数据
作为解决这类问题的“银弹”，社区发明了 css 自定义属性 这一技术。本质上看，它运行机制像是 css 变量，工作方式就体现在它的名字上： properties。
自定义属性为 web 开发开辟了一块新天地。
声明和使用自定义属性的语法
通常，使用一个新的预处理程序或框架，都得从它的语法开始学起。·
每一个预处理语言都有自己定义变量的方式，通常都由一个保留字符开始，比如 sass 中的 $ 和 less 中的 @。
自定义属性的 css 也使用同样的方法： --申明变量，当然它有一个好处：学习使用一次后，在各浏览器中复用它。
提供一种自定义属性的方法，可以在任何预处理语言中使用它。 这样，我们提供并使用的自定义属性，预处理器并不会编译它们，这些自定义属性会直接生成 css，而且你可以在原生环境下利用这些自定义的变量。
声明一个变量来代替常规的 css 属性，如 color 和 padding，仅需要一个 -- 开关的自定义属性:
.box{
--box-color: #4d4e53;
--box-padding: 0 10px;
}
属性的值可以是 颜色值、字符串、布局的类型、甚至是一个表达式。
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
/* Valid CSS custom properties can be reused later in, say, JavaScript. */
--foo: if(x > 5) this.width = 10;}
这个例子中你可以不太明白什么是 :root，它实际和 html 一致，只是有更高的优先级。·
自定义属性的级联方式与 css 属性一样，而且是动态的，这意味着你可以随时更改，并且根据不同的浏览器做针对性的处理。
要使用一个变量，你需要使用 var()，此 css function 接收一个自定义的属性：
.box{
--box-color:#4d4e53;
--box-padding: 0 10px;
padding: var(--box-padding);}
.box div{
color: var(--box-color);
}
声明和使用
var() 方法也可以设计参数的默认值。当你不确定是否某个自定义变量已经被定义，又想给一个未定义时的值时，你应该会用到这种方法。 非常简单，给它传入第二个参数就行。
.box{
--box-color:#4d4e53;
--box-padding: 0 10px;
/* 10px is used because --box-margin is not defined. */
margin: var(--box-margin, 10px);
}
你可以复用另一个变量来声明一个新的变量：
.box{
/* The --main-padding variable is used if --box-padding is not defined. */
padding: var(--box-padding, var(--main-padding));
--box-text: 'This is my box';
/* Equal to --box-highlight-text:'This is my box with highlight'; */
--box-highlight-text: var(--box-text)' with highlight';
}
这次就先到这了，下次再说明其他用法。
