CSS变量使用教程-白红宇

CSS变量使用教程

阅读量：4116 次

发布时间：2019-05-25

本文共 3244 字，大约阅读时间需要 10 分钟。

来源 | https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的

var() 来访问。（比如 color:

var(--main-color);）。

基本用法

声明一个

局部变量：

element {	--main-bg-color: brown;	}

使用一个

局部变量：

element {	background-color: var(--main-bg-color);	}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root

声明一个

全局 CSS 变量：

:root {	--global-color: #666;	--pane-padding: 5px 42px;	}

使用一个

全局 CSS 变量：

.demo{color: var(--global-color);}

解决的问题

在构建大型站点时，作者通常会面对可维护性的挑战。在这些网页中，所使用的 CSS 的数量是非常庞大的，并且在许多场合大量的信息会重复使用。

例如，在网页中维护一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题，不容出错，而单纯查找替换是远远不够的。

如果使用了 CSS 框架，这种情况会变得尤其糟糕，此时如果要修改颜色，则需要对框架本身进行修改。在这些场合使用 LESS 或 Sass 类似的预处理器是非常有帮助的，但是这种通过添加额外步骤的方式，可能会增加系统的复杂性。

CSS变量为我们带来一些预处理器的便利，并且不需要额外的编译。

这些变量的第二个优势就是名称本身就包含了语义的信息。CSS 文件变得易读和理解。main-text-color比文档中的#00ff00更容易理解，特别是同样的颜色出现在不同的文件中的时候。

CSS变量能帮助我们干什么

在一些命令式编程语言中，像Java、C++亦或是JavaScript，通过变量我们能够跟踪某些状态。变量是一种符号，关联着一个特定的值，变量的值能随着时间的推移而改变。

在像CSS这种声明式语言中，随着时间而改变的值并不存在，也就没有所谓变量的概念了。

CSS 引入了一种层级变量的概念，从而能够从容应对可维护性的挑战。这就会使得在整个 CSS tree 中都可以象征性的引用一个变量。

什么是CSS变量

CSS 变量当前有两种形式：

变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值

自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量。

注意：

在之前的标准中，自定义属性以var-作为前缀，后来才改成--前缀。Firefox 31和以后的版本遵循新标准。(bug 985838)

自定义属性和常规属性一样，作用在当前的层级，若没有定义，则从其父元素继承其值。

开始使用CSS变量

让我们从这个简单的例子开始，拥有不同类名的元素有相同的颜色：

.one {	color: white;	background-color: brown;	margin: 10px;	width: 50px;	height: 50px;	display: inline-block;	}		.two {	color: white;	background-color: black;	margin: 10px;	width: 150px;	height: 70px;	display: inline-block;	}	.three {	color: white;	background-color: brown;	margin: 10px;	width: 75px;	}	.four {	color: white;	background-color: brown;	margin: 10px;	width: 100px;	}		.five {	background-color: brown;	}

把它应用到下面这段HTML：


     	
      
	    
      
       Text 
       	    - more text
      
	
      	
      Lorem Ipsum

会得到下面的结果：

640?wx_fmt=png

注意CSS中重复的地方，brown的背景色作用在不同的元素上面。我们可以将背景色定义在更高的层级，然后通过CSS继承解决这个问题。在某些情况下，这种方法不一定可行。定义一个变量在:root伪类上，使用变量来减少重复的代码。

:root {	--main-bg-color: brown;	}		.one {	color: white;	background-color: var(--main-bg-color);	margin: 10px;	width: 50px;	height: 50px;	display: inline-block;	}		.two {	color: white;	background-color: black;	margin: 10px;	width: 150px;	height: 70px;	display: inline-block;	}	.three {	color: white;	background-color: var(--main-bg-color);	margin: 10px;	width: 75px;	}	.four {	color: white;	background-color: var(--main-bg-color);	margin: 10px;	width: 100px;	}		.five {	background-color: var(--main-bg-color);	}

只需要规范地声明所需的属性，就能得到和上面例子相同的结果

CSS变量的继承

自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素：

定义下面的CSS：

.two { --test: 10px; }	.three { --test: 2em; }

在这个例子中，

var(--test)的结果是：

class="two" 对应的节点:
10px

class="three" 对应的节点 : element:
2em

class="four" 对应的节点:
10px (inherited from its parent)

class="one" 对应的节点:
无效值, 即此属性值为未被自定义css变量覆盖的默认值

有效性(validity)和值

在传统的CSS概念里，属性的有效性(validity)对于自定义属性来讲，并不适用。当自定义属性被解析，浏览器不知道哪里为调用到它们，所以几乎所有的值都是有效的。

不幸的是，这些有效值能通过var()函数操作符来调用，即使在当前上文没有意义。属性和自定义的值会导致无效的CSS声明，所以有了

计算时有效(valid at computed time)的概念。

转载地址：http://eyfpi.baihongyu.com/

你可能感兴趣的文章

Kubernetes集群搭建之CNI-Flanneld部署篇

查看>>

k8s web终端连接工具

查看>>

手绘VS码绘（一）：静态图绘制(码绘使用P5.js)

查看>>

手绘VS码绘（二）：动态图绘制(码绘使用Processing）

论文翻译：《一个包容性设计的具体例子:聋人导向可访问性》