CSS中变量(自定义属性)的应用,统一规划页面输出样式
CSS中变量(自定义属性)的应用,统一规划页面输出样式

CSS中变量(自定义属性)的应用,统一规划页面输出样式

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属性都会同步更新样式。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注