CSS中的变量给了我们诸多优点:方便、代码重用、更可靠的代码库和提升防错能力。 示例: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变量时,你应该了解的三个主要组成: 自定义属性你已经知道了一些CSS的标准属性,如color ,margin ,width 和font-size 。 下面的示例使用了CSS的color 属性: body { color: #000000; /* The "color" CSS property */}
自定义属性仅意味着我们(创建CSS文件的人)去定义属性的名字。 为了自定义一个属性名,我们需要用-- 作为前缀。 如果我们要创建一个值为黑色的、名为text-color 的自定义属性,可以这样做: :root { --text-color: #000000; /* A custom property named "text-color" */}
var()函数为了应用自定义属性,需要利用var()函数,否则浏览器不知道他们代表什么。 如果想要在p 、h1 和h2 中的样式中使用--text-color ,可以这样使用var()函数: :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;}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
其等价于: 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属性值: 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;}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
当需要改变某些属性值时,问题就会暴露出来了。 如果我们手动的改变属性值,尤其是当CSS文件很大时,不仅会花费大量时间,还可能会范一些错误。同样的,如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。 我们可以使用CSS变量重写: :root { --base-bottom-margin: 20px; --base-line-height: 120%; --text-color: gray;}h1 { margin-bottom: var( --base-bottom-margin ); font-size: 42px; line-height: var( --base-line-height ); color: var( --text-color );}p { margin-bottom: var( --base-bottom-margin ); font-size: 18px; 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 );}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
假设你现在的客户说由于文本颜色太亮,导致文本难以阅读,想要改变文本颜色,此时,我们只需要更新一行CSS规则: --text-color: black;
提高CSS的可读性自定义属性会使样式表更加易读,也会使CSS属性声明更有语义。 将这个声明 background-color: yellow;font-size: 18px;
和下面的声明比较一下 background-color: var( --highlight-color );
font-size: var( --base-font-size );
像yellow 和18px 一类的属性值并没有给我们任何有用的上下文信息,但是当我们阅读如--base-font-size 和--highlight-color 一样的属性名时,即便在其他人的代码,我们都能马上知道这个属性值是在做什么。 要注意的事大小写敏感自定义属性是大小写敏感的(和普通的CSS规则不一样) :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;}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
自定义属性值的解析当重复声明自定义属性时,其赋值遵循通常的CSS层叠和继承规则。例如下面的示例: HTML <body>
<div class="container">
<a href="">Link</a>
</div></body>
CSS :root { --highlight-color: yellow;}body { --highlight-color: green;}.container { --highlight-color: red;}a { color: var( --highlight-color );}
当移除.container 规则时,链接的颜色值将是green 。 回退值当使用var() 函数时,可以分配一个回退的属性值,其作为一个额外参数和第一个参数用, 隔开。看下面的示例: HTML <div class="box">A Box</div>
CSS 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 的属性类型值出错) :root { --small-button: 200px;}.small-button { color: var(--small-button);}
避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width 浏览器对CSS变量的支持CSS变量用起来很方便,但是浏览器对其支持情况不太好
|