自定义属性（有时称为CSS变量或级联变量）由CSS开发人员自己定义，它们包含可以在整个文档中重复使用的值。通过自定义属性标签设置值（例如：--main-color:black;），通过var()函数获取值（例如：color:var(--main-color);）复杂的网站会有大量的CSS代码，通常会有很多重复值。基本用法声明一个自定义属性，属性名需要以两个减号（--）开头，属性值可以是任何有效的CSS值。和其他属性一样，自定义属性也写在规则集中，如下：element{--main-bg-color:brown;}定义的自定义属性需要在其可见范围内（即嵌套标签内使用),通常的最佳做法是在root下定义伪类:root,这样在HTML文档的任何地方都可以访问到:root{--main-bg-color:brown;}相关知识点var()函数var()函数可以替换元素的任何属性中值（value）的任何部分。var()方法的第一个参数是要替换的自定义属性的名称。该函数的可选第二个参数用作后备值。如果第一个参数引用的自定义属性无效，函数将使用第二个值。=var(,)例如/*回退值*//*在父元素样式中定义一个值*/.component{--text-color：#080；/*header-color未设置*/}/*在组件样式中使用它：*/.component.text{color:var(--text-color,black);/*这里color的正常值是--text-color*/}.component.header{color:var(--header-color,blue);/*这里颜色恢复为蓝色*/}特性继承：自定义属性被继承。这意味着如果没有为给定元素上的此自定义属性设置值，则将使用其父元素上的值。替代值嵌套：var()本身可以作为第二个值无限嵌套。三{背景颜色：var(--my-var,var(--my-background,pink));像这样写可能会导致性能问题，因为它会花费更多时间来处理这些变量。有效性：当自定义属性值被解析时，浏览器不知道它们什么时候会被使用，所以必须认为这些值是有效的。但真实情况是，这些值的有效性只有在调用var()函数时才能知道，也就是计算时的有效性。无效情况：首先检查属性color是否为继承属性，如果不是，则将该值设置为其默认初始值。:root伪类:root这个CSS伪类匹配文档树的根元素。对于HTML，:root表示\元素，与html选择器相同，只是具有更高的优先级。在实践中它主要用于声明全局CSS变量。与Less和Sass变量的区别声明LESS使用@符号，SCSS使用$符号@link-color:#000@main-top:search;$to-color:#000$main-top:search;使用不同于CSS，以“插值”的形式声明要使用的变量，不仅可以表示为数值、文本嵌入表达式，还可以表示为类名、属性名等。@myColor:红色;h1{@myColor:绿色;//仅在h1中有用，局部范围color:@myColor;}.@{myColor}{background-color:red}@url-prefix:"http://XXXX";.test{background:url("@{url-prefix}/images/picutre001.png")不重复；}$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-scope@color:#00c;/*蓝色*/#header{@color:#c00;/*红色*/border:1pxsolid@color;/*红色边框*/}#footer{border:1pxsolid@color;/*blueborder*/}Less-scopecompiled#header{border:1pxsolid#cc0000;}#footer{border:1pxsolid#0000cc;}scss-scope$color:#00c;/*蓝色*/#header{$color:#c00;/*红色*/border:1pxsolid$color;/*红色边框*/}#footer{border:1pxsolid$color;/*blueborder*/}Sass-scope编译#header{border:1pxsolid#c00}#footer{border:1pxsolid#c00}少区域它分为上下作用域，使用与原始CSSvar()相同的作用域规则。SCSS采用就近原则，即从上到下的转换规则
