css变量（自定义属性）的介绍、用法和实例

层叠样式表仍然有变量的概念，通过var()和--双短横线来实现。

一、自定义属性

1.定义

引用自：MDN

带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var() 函数在全文档范围内复用的。

2.用法

自定义属性通过双短横线定义，紧跟属性名和属性值，通常我们也将其称为变量。

--varName:value

• varName 规定自定义属性名
• value 规定自定义属性的值。

3.示例

:root{
    --main-color:#ff0000;
    --fix-color:#0000ff;
    --default-size:12px;
}

以上示例定义了三个变量：

--main-color、--fix-color、--default-size三个变量，并且规定了他们的值。

Notice:变量区分大小写，例如--bgColor与--bgcolor并不能表示同一个变量。

二、访问变量值

1.定义

mdn给出的定义：

var() CSS 函数可以插入一个自定义属性（有时也被称为“CSS 变量”）的值，用来代替非自定义属性中值的任何部分。

首先var是一个css函数，其次他是用来访问变量的值，以替代非自定义属性值的任何部分。

也就是说，变量可以用在所有css规定属性的值中。

2.用法

var(varName,declaration);

• varName 指定要取值的变量名
• declaration 回退值，当产生了一个无效的引用将会使用此值作为替换。

3.示例

css:

:root{
    --size:12px;
    --main-color:red;
    --fixed-color:blue;
}
.test{
    font-size:var(--size);
    color:var(--main-color);
    font-weight:var(--fweight,600);
}

html:

<p class='test'>
你好，我应该是红色的文字，大小为12px，字重为600，因为--fweight变量不存在，因此使用其回退值。
</p>

效果：

你好，我应该是红色的文字，大小为12px，字重为600，因为--fweight变量不存在，因此使用其回退值。

三、扩展

1.除部分特殊符号（例如：{ } [] * -等）回退值可以包含所有非css关键字的内容，自定义属性的回退值允许使用逗号。例如，var(--foo, red, blue) 将 red, blue 同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。但是他不像编程语言中的不定长参数那样是多个值，本质上仍然是一个字符串：

:root{
    --line:to left,#ff0000,#00003c;
}
.box-sha{
    width:100px;
    height:100px;
    background:linear-gradient(var(--lines,to right bottom,#5656ff,#cccc00));
}

如下所示：

2.自定义属性可以被看做变量，因此，如同编程语言里面的字符串格式化一样，可以在回退值中嵌套自定义属性。

.sbox{
    --d:var(--a,var(--c,red));
    color:var(--d,blue);
}

html:

<div class="sbox">
    猜猜我的颜色？
</div>

很显然，上面字符的颜色是红色，因为color属性引用自定属性--d的值，且--d的值存在，--d的值又引用--a属性的值，显然没有定义--a所以使用回退值，也就是--c的值，同样不存在，最后值为red。在color的值中，因为--d是存在的，所以blue不生效。

3.切记，回退属性只能替换空的不存在的自定义属性，如果你的引用的自定义属性存在，回退属性都不会生效。

.sbox{ 
    --a:;
    --d:var(--a,var(--c,red));
    color:var(--d,blue);
}

仍然以上面的例子，--a是个语法错误，没有给她任何值，但是他仍然是存在的，所以--d的值不为red。

4.在非自定义属性值中，可以将非自定义属性值部分与自定义属性值混用。

例如：

body{
            --c:red;
            --s-position:1px 1px;
            --s-color:red;
            --test:width;
            --line-color:#fff000,#ffcc88;
        }
.test1{
            width: 100px;
            height: 200px;
            box-shadow: var(--ss-color,10px 10px) 5px 5px var(--s-color);
            background: linear-gradient(var(--direction,to bottom),var(--line-color,red,blue));
        }

效果：

4.注意，自定义属性的引用只能在非自定义属性的值中，请勿尝试使用非自定义属性的值作为自定义属性的属性名来使用，以免浪费您宝贵的时间。

:root{
    --n:background-color;
}
body{
    var(--n):red;
}

这样自然是无效的！请回顾上方引用官方文档的一句话：

仅限于非自定义属性值！

 CSS 函数可以插入一个自定义属性（有时也被称为“CSS 变量”）的值，用来代替非自定义属性中值的任何部分。