CSS变量,也称为自定义属性,是一种在CSS中定义和重用值的方式。它们允许开发者在一个地方定义样式值,然后在整个样式表中引用这些值,从而提高代码的可维护性和可读性。
1、定义和使用CSS变量
CSS变量的定义和使用非常简单。变量名以两个连字符开头,变量值为任何有效的CSS值。它和其他CSS属性一样,可以在任何选择器中定义。以下是一个基本示例:
:root {
--main-bg-color: #3498db;
--main-text-color: #ffffff;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
在这个示例中,我们在 :root 选择器中定义了两个变量:–main-bg-color 和 –main-text-color。然后,我们使用 var() 函数在 body 选择器中引用这些变量。
在变量的定义中有以下几个约束:
- 变量名:以两个两字符开头,区分大小写;
- 变量值:可以是任何有效的CSS属性值;
- 语法:写任何css样式集一样;
2、变量的作用域及继承性
在定义中,我们提到,CSS变量的定义,语法和写任何css样式集一样,那么它是否也存在作用域集相应的继承特性呢?答案是肯定的。
2.1、CSS变量的作用域
CSS变量的作用域类似于 ES中变量作用域:全局作用域 和 “函数作用域”。注意"函数作用域"打了引号。
全局作用域:顾名思义就是定义后,可以在HTML文档的任何递地方访问到。定义在根伪类:root下:
:root{
--theme-color: blue;
--theme-border-color: #c2c2c2;