CSS中的属性变量(自定义属性)
最近因为写各种学习笔记,又折腾了几次博客的css,这个过程中发现一个问题,就是属性的统一性不太好把握,有些时候不同标签、不同类、不同ID的元素,想要使用统一的颜色、统一的字号等,会比较麻烦,需要逐一修改。于是突然想到,CSS会不会也有个类似自变量的东东,可以一次定义重复使用这些属性值,这样一来,以后修改也会方便很多的。查了一下CSS参考手册,还真有!(我原谅自己这么多年以后才发现css竟然如此强大)
原来,CSS也是可以有自定义变量的,可以一次定义重复使用的属性值是多么的方便啊。
例如下面这个菜单的HTML源码是这样的:
<a href="www.cnwyw.net">Pollen Blog</a>
<div>
<ul class="zhucaidankuai">
<li>
<a href="/category/photography/" class="caidansy">摄影</a>
</li>
<li>
<a href="/category/writing/" class="caidanxz">写作</a>
</li>
<li>
<a href="/category/aquatic/" class="caidansz">水族</a>
</li>
</ul>
</div>
为了精细控制不同分类的背景色,我可能会给每个分类都设置一个类,而同时又想让每个菜单项的文字颜色和大小一致。这种情况下,如果不用变量,就要给每个类都写入background-color、color、font-size,而且每多一个菜单项,就要重复写一遍。当发生调整要修改颜色值的时候,就需要每个菜单项都修改一次。想想都头疼。
当然了,这里是举例子,通过选择器也可以统一文字颜色和大小的,但是当标签、类、ID都很复杂的时候,写选择器都是个麻烦事情。
CSS变量的语法并不复杂
在一个伪类中声明变量,并在需要时调用即可。变量的值可以是任何有效的CSS属性值。
下面的例子中,在伪类:root
中声明了--caidan-wenzise
和--caidan-wenzidaxiao
这两个变量(自定义属性)并为其赋以有效值
,在之后的css部分中需要的地方,直接用var(变量名)
的形式调用即可。
这里需要注意的是,声明一个变量(自定义属性),其名称要以连续两个减号
--
开头,后面就随意了。
所以,用一个变量来代表属性值会简单很多。CSS如下:
:root {
--caidan-wenzise: #fff;
--caidan-wenzidaxiao: 18px;
}
.zhucaidankuai {
border-radius: 0.5rem;
background-color: #596585;
}
.caidansy {
background: red;
color: var(--caidan-wenzise);
font-size: var(--caidan-wenzidaxiao);
}
.caidanxz {
background: blue;
color: var(--caidan-wenzise);
font-size: var(--caidan-wenzidaxiao);
}
.caidansz {
background: green;
color: var(--caidan-wenzise);
font-size: var(--caidan-wenzidaxiao);
}
这样的css变量就可以实现如下的输出效果:
在本例中看似简单,但是,当实际应用到网站当中时,复杂的HTML和CSS代码中,使用自定义变量属性值会带来很多便利,尤其是需要统一调整一系列相同属性值的时候,以往可能需要重复写一样的值几十次,现在只需要一次。
例如,想药要将菜单的文字颜色统一改为黄色,只需要将--caidan-wenzise: #fff;
变量声明这里的属性值由#fff
改为yellow
即可,下面所有应用了该变量值的css属性都会同步更新样式。