自定义属性（有时候也被称作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为就近准则，即至顶向下的转换规则。