共计 2226 个字符，预计需要花费 6 分钟才能阅读完成。
自定义属性（有时候也被称作 CSS 变量或者级联变量）是由 CSS 开发者自行定义的，它蕴含的值能够在整个文档中重复使用。由自定义属性标记设定值（比方：–main-color: black;），由 var() 函数来获取值（比方：color: var(–main-color);）简单的网站都会有大量的 CSS 代码，通常也会有许多反复的值。
根本用法
申明一个自定义属性，属性名须要以两个减号（--）开始，属性值则能够是任何无效的 CSS 值。和其余属性一样，自定义属性也是写在规定集之内的，如下：
element {--main-bg-color: brown;}所定义自定义属性须要在其可见作用域内（即被嵌套的标签内应用），通常的最佳实际是定义在根伪类 :root 下，这样就能够在 HTML 文档的任何中央拜访到它了：
:root {--main-bg-color: brown;}相干知识点
var() 函数
var()函数能够代替元素中任何属性中的 值（value）的任何局部。
var()办法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数援用的自定义属性有效，则该函数将应用第二个值。
<var()> = var( <custom-property-name> , <declaration-value>)举个栗子
/* 后备值 */
/* 在父元素款式中定义一个值 */
.component {--text-color: #080; /* header-color 并没有被设定 */}
/* 在 component 的款式中应用它：*/
.component .text {color: var(--text-color, black); /* 此处 color 失常取值 --text-color */
}
.component .header {color: var(--header-color, blue); /* 此处 color 被回退到 blue */
}个性
- 继承：自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被应用。
-
备用值嵌套：var()自身能够作为第二个值进行有限嵌套
.three {background-color: var(--my-var, var(--my-background, pink)); }这样写可能会导致性能问题，因为它花了更多的工夫在解决这些变量上。
- 有效性：当自定义属性值被解析，浏览器不晓得它们什么时候会被应用，所以必须认为这些值都是无效的。然而真实情况是，只有当
var()函数调用的时候能力晓得这些值的有效性，即 计算时有效性。 - 有效状况：先会查看属性 color 是否为继承属性，如果不是则将该值设置为它的 默认初始值。
:root 伪类
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 示意 \<html> 元素，除了优先级更高之外，与 html 选择器雷同。实际中次要用于申明全局 CSS 变量。
与 Less 和 Sass 变量的区别
申明
LESS 用 @符号，SCSS 用 $ 符号示意
@link-color:#000
@main-top : search;$to-color:#000
$main-top : search;应用
不同于 CSS，申明变量以“插值”的模式应用，并且岂但能够示意为数值，文本嵌入表达式，还能够作为类名、属性名等。
@myColor: red;
h1 {
@myColor: green; // 只在 h1 外头有用，部分作用域
color: @myColor;
}
[email protected]{myColor}{background-color: red}
@url-prefix: "http://XXXX";
.test {background: url("@{url-prefix}/images/picutre001.png") no-repeat;
}$myColor: red;
h1 {
$myColor: green; // 只在 h1 外头有用，部分作用域
color: $myColor;
}
// 变量用 #{}包裹
.#{$myColor}{background-color: red}
$url-prefix: "http://XXXX";
.test {background: url("#{$url-prefix}/images/picutre001.png") no-repeat;
}Less 和 Sass 作用域规定不同
Less- 作用域
@color: #00c; /* 蓝色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 红色边框 */
}
#footer {border: 1px solid @color; /* 蓝色边框 */}Less- 作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}scss- 作用域
$color: #00c; /* 蓝色 */
#header {
$color: #c00; /* red */
border: 1px solid $color; /* 红色边框 */
}
#footer {border: 1px solid $color; /* 蓝色边框 */}Sass- 作用域编译后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}Less 辨别上下级作用域，应用与原生 CSS var() 统一的作用域规定，SCSS 为就近准则，即至顶向下的转换规则。
