CSS中关于变量的基本教程详解

　　CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。

　　示例

　　CSS Code复制内容到剪贴板 :root{ --base-font-size:16px; --link-color:#6495ed; } p{ font-size:var(--base-font-size); } a{ font-size:var(--base-font-size); color:var(--link-color); }

　　基础

　　当使用CSS变量时，你应该了解的三个主要组成：

　　自定义属性

　　var()函数

　　:root伪类

　　自定义属性

　　你已经知道了一些CSS的标准属性，如color,margin,width和font-size。

　　下面的示例使用了CSS的color属性：

　　CSS Code复制内容到剪贴板 body{ color:#000000;/*The"color"CSSproperty*/ }

　　自定义属性仅意味着我们（创建CSS文件的人）去定义属性的名字。

　　为了自定义一个属性名，我们需要用--作为前缀。

　　如果我们要创建一个值为黑色的、名为text-color的自定义属性，可以这样做：

　　CSS Code复制内容到剪贴板 :root{ --text-color:#000000;/*Acustompropertynamed"text-color"*/ }

　　var()函数

　　为了应用自定义属性，需要利用var()函数，否则浏览器不知道他们代表什么。

　　如果想要在p、h1和h2中的样式中使用--text-color，可以这样使用var()函数：

　　CSS Code复制内容到剪贴板 :root{ --text-color:#000000; } p{ color:var(--text-color); font-size:16px; } h1{ color:var(--text-color); font-size:42px; } h2{ color:var(--text-color); font-size:36px; }

　　其等价于：

　　CSS Code复制内容到剪贴板 p{ color:#000000; font-size:16px; } h1{ color:#000000; font-size:42px; } h2{ color:#000000; font-size:36px; }

　　:root伪类

　　我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性，但到处定义属性并不是一个好主意，这对CSS的可维护性和可阅读性是一个挑战。

　　:root 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。

　　CSS变量的好处

　　可维护性

　　在一个Web开发项目中，我们经常重复使用一个特定的CSS属性值：

　　CSS Code复制内容到剪贴板 h1{ margin-bottom:20px; font-size:42px; line-height:120%; color:gray; } p{ margin-bottom:20px; font-size:18px; line-height:120%; color:gray; } img{ margin-bottom:20px; border:1pxsolidgray; } .callout{ margin-bottom:20px; border:3pxsolidgray; border-radius:5px; }

　　当需要改变某些属性值时，问题就会暴露出来了。

　　如果我们手动的改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。

　　我们可以使用CSS变量重写：

　　CSS Code复制内容到剪贴板 :root{ --base-bottombottom-margin:20px; --base-line-height:120%; --text-color:gray; } h1{ margin-bottom:var(--base-bottombottom-margin); font-size:42px; line-height:var(--base-line-height); color:var(--text-color); } p{ margin-bottom:var(--base-bottombottom-margin); font-size:18px; line-height:var(--base-line-height); color:var(--text-color); } img{ margin-bottom:var(--base-bottombottom-margin); border:1pxsolidgray; } .callout{ margin-bottom:var(--base-bottombottom-margin); border:1pxsolidgray; border-radius:5px; color:var(--text-color); }

　　假设你现在的客户说由于文本颜色太亮，导致文本难以阅读，想要改变文本颜色，此时，我们只需要更新一行CSS规则：

　　CSS Code复制内容到剪贴板 --text-color:black;

　　提高CSS的可读性

　　自定义属性会使样式表更加易读，也会使CSS属性声明更有语义。

　　将这个声明

　　CSS Code复制内容到剪贴板 background-color:yellow;

　　和下面的声明比较一下

　　CSS Code复制内容到剪贴板 background-color:var(--highlight-color); font-size:var(--base-font-size);

　　像yellow和18px一类的属性值并没有给我们任何有用的上下文信息，但是当我们阅读如--base-font-size和--highlight-color一样的属性名时，即便在其他人的代码，我们都能马上知道这个属性值是在做什么。

　　要注意的事

　　大小写敏感

　　自定义属性是大小写敏感的（和普通的CSS规则不一样）

　　CSS Code复制内容到剪贴板 :root{ --main-bg-color:green; --MAIN-BG-COLOR:RED; } .box{ background-color:var(--main-bg-color);/*greenbackground*/ } .circle{ BACKGROUND-COLOR:VAR(--MAIN-BG-COLOR);/*redbackground*/ border-radius:9999em; } .box, .circle{ height:100px; width:100px; margin-top:25px; box-sizing:padding-box; padding-top:40px; text-align:center; }

　　自定义属性值的解析

　　当重复声明自定义属性时，其赋值遵循通常的`CSS层叠和继承规则。例如下面的示例：

　　HTML

　　XML/HTML Code复制内容到剪贴板Link

　　CSS

　　CSS Code复制内容到剪贴板 :root{ --highlight-color:yellow; } body{ --highlight-color:green; } .container{ --highlight-color:red; } a{ color:var(--highlight-color); }

　　当移除.container规则时，链接的颜色值将是green。

　　回退值

　　当使用var()函数时，可以分配一个回退的属性值，其作为一个额外参数和第一个参数用,隔开。看下面的示例：

　　HTML

　　XML/HTML Code复制内容到剪贴板ABox

　　CSS

　　CSS Code复制内容到剪贴板 div{ --container-bg-color:black; } .box{ width:100px; height:100px; padding-top:40px; box-sizing:padding-box; background-color:var(--container-bf-color,red); color:white; text-align:center; }

　　因为给var()传递了一个回退值参数，所以div的背景色最中被渲染成红色。

　　无效值

　　谨防给CSS属性分配错误类型的值。

　　在下面的示例中，由于自定义属性--small-button被赋予一个长度单位，它被用在.small-button样式中是无效的(译者注：因为color的属性类型值出错)

　　CSS Code复制内容到剪贴板 :root{ --small-button:200px; } .small-button{ color:var(--small-button); }

　　避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width

　　浏览器对CSS变量的支持

　　CSS变量用起来很方便，但是浏览器对其支持情况不太好：