本指南讨论的主题是大多数浏览器还不支持．看到浏览器支持部分以获取更多信息。
CSS变量为我们提供了许多与编程语言中的经典变量相同的优点:便利性、代码可重用性、更可读的代码库和改进防误措施．
例子
:root{——base-font-size: 16px;——链接颜色:# 6495 ed;} p {font-size: var(——base-font-size);} a {font-size: var(——base-font-size);颜色:var(——link-color);｝基础知识
在使用CSS变量时，有三个主要组件你应该知道:
- 自定义属性
var ()函数:根伪类
自定义属性
您已经了解了标准CSS属性，例如颜色，保证金，宽度,字体大小．下面的示例使用颜色CSS属性:
车身{颜色:#000000;/*“color”CSS属性*/｝一个自定义属性只是意味着我们(CSS作者)可以定义属性的名称。要定义一个自定义属性名，我们需要在它前面加上两个破折号(--)．
如果要创建名称为的自定义属性文本颜色它的颜色值为黑色(# 000000在十六进制代码中)，我们可以这样做:
:root{——text-color: #000000;/*一个名为"text-color"的自定义属性｝var()函数
为了将自定义属性应用于我们的工作，我们必须使用var ()函数，否则浏览器就不知道它们是干什么用的。如果我们要用我们的价值——文本颜色本处的自订物业p，h1,h2样式规则，那么我们需要使用var ()函数如下:
:root{——text-color: #000000;} p{颜色:Var(——text-color)；字体大小:16 px;} h1{颜色:Var(——text-color)；字体大小:42 px;} h2{颜色:Var(——text-color)；字体大小:36 px;｝上面的例子等价于:
P{颜色:#000000;字体大小:16 px;} h1{颜色:#000000;字体大小:42 px;} h2{颜色:#000000;字体大小:36 px;｝:根伪类
我们需要一个地方来放置我们的自定义属性。我们可以在任何样式规则中指定自定义属性，但很多时候，这不是一个好主意，因为到处指定自定义属性会带来可维护性和css可读性方面的挑战。的:根伪类表示HTML文档的顶层。
这个选择器是放置自定义属性的好地方，因为我们可以通过其他具有更大特异性的CSS选择器来覆盖自定义属性值。
CSS变量的好处
可维护性
在一个给定的web开发项目中，我们经常会重用某些CSS属性值。我们经常会重复使用颜色、行高、页边距、字体大小等等。下面是四个可以从CSS变量中受益的样式规则的例子:
H1 {margin-bottom: 20px;字体大小:42 px;行高:120%;颜色:灰色;} p {margin-bottom: 20px;字体大小:18 px;行高:120%;颜色:灰色;} img {margin-bottom: 20px;边框:1px纯灰色; } .callout { margin-bottom: 20px; border: 3px solid gray; border-radius: 5px; }当我们稍后需要更改某些属性值时，问题就会浮出水面。
如果我们手动更改值，可能会花费大量时间，而且很有可能在某个地方出错，特别是如果样式表很大的话。类似地，如果执行批处理查找-替换，可能会无意中影响其他样式规则。我们可以用CSS变量重写上面的例子:
:根{——base-bottom-margin: 20px;——base-line-height: 120%;——文本颜色:灰色;} h1 {margin-bottom: var(——base-bottom-margin);字体大小:42 px;Line-height: var(——base-line-height);颜色:var(——text-color);} p {margin-bottom: var(——base-bottom-margin);字体大小:18 px;Line-height: var(——base-line-height); color: var( --text-color ); } img { margin-bottom: var( --base-bottom-margin ); border: 1px solid gray; } .callout { margin-bottom: var( --base-bottom-margin ); border: 1px solid gray; border-radius: 5px; color: var( --text-color ); }现在想象一下，您的客户对您说，由于文本颜色太浅，屏幕上的文本很难阅读。
在这种情况下，我们只需要更新CSS中的一行:
——文本颜色:黑色的；这是-减少66%的代码行数我们必须在前一组样式规则(一行与三行)的上下文中进行编辑。同样，当我们想要试验我们的设计时，使用CSS变量让我们更容易。当我们开发项目时，我们可以在一个地方快速测试颜色值、线高和底线值，我们将能够以整体的方式看到效果。
提高CSS的可读性
自定义属性有助于使样式表更易于阅读。它也可以使我们的CSS属性声明更有意义。比较:
背景颜色:黄色的；字体大小:18 px；:
background - color: var (——highlight-color）;字体大小:var (——基础字体大小）;像这样的财产价值黄色的而且18 px不要给我们任何有用的背景信息。
但当我们读自定义属性名时，比如——基础字体大小而且——highlight-color即使当我们阅读别人的代码时，我们也能立即知道属性值在做什么。
要记住的事情
大小写敏感
自定义属性区分大小写(与常规CSS属性不同)。
:根{——main-bg-color:绿色;——MAIN-BG-COLOR:红色;} .box {background-color: var(——main-bg-color);/*绿色背景*/} .circle {BACKGROUND-COLOR: VAR(——MAIN-BG-COLOR);/*红色背景*/border - radius: 9999 em;} .box， .circle{高度:100px;宽度:100 px;margin-top: 25 px;box-sizing: padding-box;padding-top: 40像素;text-align:中心;｝在上面的例子中，实际上已经定义了两个自定义属性:——main-bg-color而且——MAIN-BG-COLOR．
自定义属性值解决方案
当一个自定义属性声明多次时，赋值遵循正常的CSS级联和继承规则。在下面的示例中，链接将被分配为的颜色红色的因为.container选择器有更大的特异性相比:根而且身体．超文本标记语言
<身体> < div class = "容器" > < a href = " " >链接< / > < / div > < /身体>CSS
:root{——highlight-color:黄色;} body{——highlight-color:绿色;} .container{——highlight-color:红色;} a{颜色:var(——highlight-color);｝但是，如果我们去掉.container样式规则从我们的代码，链接将分配的颜色绿色因为身体现在成为匹配链接的下一个选择器。
回退值
属性时，可以分配回退属性值var ()函数符号。只需将回退属性值作为用逗号(，)．在下面的示例中，使用.box元素应该使用黑色背景渲染。
然而，因为在引用自定义属性名时有一个拼写错误，背景将使用回退值(即。红色的)．超文本标记语言
A box CSS
Div{——container-bg-color:黑色;} .box{宽度:100px;身高:100 px;padding-top: 40像素;box-sizing: padding-box;Background-color: var(——container- .男朋友-颜色,红色的）;颜色:白色;text-align:中心;｝无效的值
小心为CSS属性分配错误类型的值。在下面的例子中，由于——小按钮自定义属性被赋予一个长度单位，其在.small-button样式规则无效。
:root{——小按钮:200 px；} .small-button {颜色: var(——小按钮);｝避免这种情况的一个好方法是使用描述性的自定义属性名。
例如，命名上面的自定义属性——small-button-width使其不可能被不当使用。
浏览器支持CSS变量
最后更新:2015年3月。
桌面
| 浏览器 | 版本支持 |
|---|---|
| 铬 | 没有一个 |
| 火狐 | 31日版本 |
| 即 | 没有一个 |
| Safari | 没有一个 |
移动
| 浏览器 | 版本支持 |
|---|---|
| 铬(Android) | 没有一个 |
| Safari (iOS) | 没有一个 |
本指南中涉及的信息使用最新版本W3C CSS自定义属性级联变量模块级别1作为参考。
相关内容
