CSS中关于变量的基本教程
CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。
示例
基础
当使用CSS变量时，你应该了解的三个主要组成：
自定义属性
var()函数
:root伪类
自定义属性
你已经知道了一些CSS的标准属性，如color,margin,width和font-size。
下面的示例使用了CSS的color属性：
自定义属性仅意味着我们（创建CSS文件的人）去定义属性的名字。
为了自定义一个属性名，我们需要用--作为前缀。
如果我们要创建一个值为黑色的、名为text-color的自定义属性，可以这样做：
var()函数
为了应用自定义属性，需要利用var()函数，否则浏览器不知道他们代表什么。
如果想要在p、h1和h2中的样式中使用--text-color，可以这样使用var()函数：
其等价于：
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 : 1px solid gray ; } .callout { margin-bottom : 20px ; border : 3px solid gray ; border -radius: 5px ; }当需要改变某些属性值时，问题就会暴露出来了。
如果我们手动的改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。
我们可以使用CSS变量重写：
假设你现在的客户说由于文本颜色太亮，导致文本难以阅读，想要改变文本颜色，此时，我们只需要更新一行CSS规则：
CSS Code 复制内容到剪贴板 --text-color: black;提高CSS的可读性
自定义属性会使样式表更加易读，也会使CSS属性声明更有语义。
将这个声明
和下面的声明比较一下
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 ); /* green background */ } . circle { BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */ border -radius: 9999em; } .box, . circle { height : 100px ; width : 100px ; margin-top : 25px ; box-sizing: padding -box; padding-top : 40px ; text-align : center ; }自定义属性值的解析
当重复声明自定义属性时，其赋值遵循通常的CSS层叠和继承规则。例如下面的示例：
HTML
CSS
CSS Code 复制内容到剪贴板 :root { --highlight- color : yellow ; } body { --highlight- color : green ; } .container { --highlight- color : red ; } a { color : var( --highlight- color ); }当移除.container规则时，链接的颜色值将是green。
回退值
当使用var()函数时，可以分配一个回退的属性值，其作为一个额外参数和第一个参数用,隔开。看下面的示例：
HTML
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的属性类型值出错)
避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width
浏览器对CSS变量的支持
CSS变量用起来很方便，但是浏览器对其支持情况不太好： 
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
