深入理解CSS中的变量(概念篇)

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;