大家好，我是CUGGZ。CSS变量由开发人员定义，包含可在整个文档中重复使用的值。让我们通过这篇文章来更好地理解声明性CSS变量！1.基本上使用CSS变量或自定义属性，其中包含可以在整个文档中重复使用的值。让我们来看看CSS变量是如何定义和使用的。首先，我们需要声明一个自定义属性，属性名以两个减号（--）开头，属性值可以是任何有效的CSS值，这个属性可以像其他属性一样写在规则集中：:root{--main-bg-color:#C92E33;}通常，最好的做法是在根伪类:root下定义CSS变量，以便可以在HTML文档的任何位置访问它。使用CSS变量时，使用var()函数将需要变量的变量名包裹起来：div{background-color:var(--main-bg-color)}除了变量名，var()还有第二个参数——备用值。如果发现某个变量值不可访问，将使用替代值来代替它：div{background-color:var(--main-bg-color,red);}对于CSS变量的替代值，替换时，有四种可能：浏览器不支持CSS变量，带有var()的代码行会被忽略，使用浏览器的默认值；浏览器支持变量，将变量设置为正确的值，则直接使用该变量；浏览器支持该变量，如果该变量没有设置任何值，则直接使用备用值；浏览器支持该变量，变量设置为无效值，则使用浏览器的默认值。我们甚至可以在媒体查询中重置变量，而且这些重置值可以在任何地方使用，这是预处理器变量做不到的：
标签的内容会是橙色的，因为局部变量的优先级比全局变量有更高的优先级。CSS中存在继承的概念，CSS变量也是如此。如果没有找到元素的变量，它将从其父元素继承变量值。下面的标签的内容也会是橙色的，因为在它的选择器中没有找到--color变量，所以会在它的parent中一层一层的找到这个变量：:root{--color:red;}body{--color:orange;}h2{color:var(--color);}三、注意事项(1)CSS变量区分大小写在定义CSS变量时，需要注意的是CSS变量的变量名（即属性名）是区分大小写的，--my-color和--My-color会被认为是两个不同的CSS变量。(2)避免循环依赖定义CSS变量时，不能出现循环依赖，会导致页面加载失败：--variable_name_1:var(variable_name_2,fallback);--variable_name_2:var(variable_name_1,fallback);(3)CSSVariablescannotbepropertynames不能使用CSS中已有的属性作为CSS的变量名。例如，我们不能初始化名为“font-size”的变量。4.在JavaScript中使用使用CSS变量的好处之一是您可以在JavaScript中访问它。如果我们通过内联样式设置CSS变量：可以通过以下代码获取变量值：//获取元素constelement=document.querySelector('p');//检索CSS变量--colorelement.style.getPropertyValue('--color');//'red'如果在CSS文件中设置了CSS变量：p{--color:red;}变量值需要通过以下形式获取：//获取
元素constelement=document.querySelector('p');//获取CSS变量--colorgetComputedStyle(element).getPropertyValue('--color');//'red'当然也可以使用这种形式获取变量值：
//获取元素constelement=document.querySelector('p');//获取CSS变量--colorgetComputedStyle(element).getPropertyValue('--color');//'red'可以使用JavaScript以下列形式设置CSS变量：//获取
元素constelement=document.querySelector('p');//将--color变量设置为blueelement.style。setProperty('--颜色','蓝色');5.SASS变量vsCSS变量让我们来看看CSS变量在出现之前是怎么做的。在CSS变量出现之前，开发人员使用SASS变量，它们的用途相似，但流动性和灵活性较差。定义SASS变量时需要在变量名前加“$”，使用变量时直接使用变量名：$main-bg-color:#C92E33;background-color:$main-bg-color;SASSproblem原因是它是一个预处理器，所以在SASS中声明的任何变量都需要编译后才能执行。上面的代码将被编译成这样：background-color:#C92E33;这是有效的CSS。代码编译完成后，变量就会消失。因此，我们不能在CSS运行时改变变量值。预处理器中的变量范围归结为嵌套的花括号块。然而，因为CSS变量是属性，它们的范围是基于DOM的。这意味着CSS变量是按元素解析的，而不是按范围解析的，请参见以下示例：body{--shadow-color:red;}button{box-shadow:1px1px1pxvar(--shadow-color);}button:hover{--shadow-color:blue;}当我们将鼠标悬停在按钮上时，按钮的红色变为蓝色。那么使用预处理器语言SASS会有什么结果呢？看代码：body{$shadow-color:gray;}button{box-shadow:1px1px1px$shadow-color;}button:hover{$shadow-color:blue;}这会导致语法错误，第六行使用了一个未定义的变量。因为SASS不知道
在它的选择器中没有找到--color变量，所以会在它的parent中一层一层的找到这个变量：:root{--color:red;}body{--color:orange;}h2{color:var(--color);}三、注意事项(1)CSS变量区分大小写在定义CSS变量时，需要注意的是CSS变量的变量名（即属性名）是区分大小写的，--my-color和--My-color会被认为是两个不同的CSS变量。(2)避免循环依赖定义CSS变量时，不能出现循环依赖，会导致页面加载失败：--variable_name_1:var(variable_name_2,fallback);--variable_name_2:var(variable_name_1,fallback);(3)CSSVariablescannotbepropertynames不能使用CSS中已有的属性作为CSS的变量名。例如，我们不能初始化名为“font-size”的变量。4.在JavaScript中使用使用CSS变量的好处之一是您可以在JavaScript中访问它。如果我们通过内联样式设置CSS变量：可以通过以下代码获取变量值：//获取元素constelement=document.querySelector('p');//检索CSS变量--colorelement.style.getPropertyValue('--color');//'red'如果在CSS文件中设置了CSS变量：p{--color:red;}变量值需要通过以下形式获取：//获取
元素constelement=document.querySelector('p');//获取CSS变量--colorgetComputedStyle(element).getPropertyValue('--color');//'red'当然也可以使用这种形式获取变量值：
//获取元素constelement=document.querySelector('p');//获取CSS变量--colorgetComputedStyle(element).getPropertyValue('--color');//'red'可以使用JavaScript以下列形式设置CSS变量：//获取
元素constelement=document.querySelector('p');//将--color变量设置为blueelement.style。setProperty('--颜色','蓝色');5.SASS变量vsCSS变量让我们来看看CSS变量在出现之前是怎么做的。在CSS变量出现之前，开发人员使用SASS变量，它们的用途相似，但流动性和灵活性较差。定义SASS变量时需要在变量名前加“$”，使用变量时直接使用变量名：$main-bg-color:#C92E33;background-color:$main-bg-color;SASSproblem原因是它是一个预处理器，所以在SASS中声明的任何变量都需要编译后才能执行。上面的代码将被编译成这样：background-color:#C92E33;这是有效的CSS。代码编译完成后，变量就会消失。因此，我们不能在CSS运行时改变变量值。预处理器中的变量范围归结为嵌套的花括号块。然而，因为CSS变量是属性，它们的范围是基于DOM的。这意味着CSS变量是按元素解析的，而不是按范围解析的，请参见以下示例：body{--shadow-color:red;}button{box-shadow:1px1px1pxvar(--shadow-color);}button:hover{--shadow-color:blue;}当我们将鼠标悬停在按钮上时，按钮的红色变为蓝色。那么使用预处理器语言SASS会有什么结果呢？看代码：body{$shadow-color:gray;}button{box-shadow:1px1px1px$shadow-color;}button:hover{$shadow-color:blue;}这会导致语法错误，第六行使用了一个未定义的变量。因为SASS不知道
元素constelement=document.querySelector('p');//检索CSS变量--colorelement.style.getPropertyValue('--color');//'red'如果在CSS文件中设置了CSS变量：p{--color:red;}变量值需要通过以下形式获取：//获取
元素constelement=document.querySelector('p');//获取CSS变量--colorgetComputedStyle(element).getPropertyValue('--color');//'red'当然也可以使用这种形式获取变量值：
元素constelement=document.querySelector('p');//获取CSS变量--colorgetComputedStyle(element).getPropertyValue('--color');//'red'可以使用JavaScript以下列形式设置CSS变量：//获取
元素constelement=document.querySelector('p');//将--color变量设置为blueelement.style。setProperty('--颜色','蓝色');5.SASS变量vsCSS变量让我们来看看CSS变量在出现之前是怎么做的。在CSS变量出现之前，开发人员使用SASS变量，它们的用途相似，但流动性和灵活性较差。定义SASS变量时需要在变量名前加“$”，使用变量时直接使用变量名：$main-bg-color:#C92E33;background-color:$main-bg-color;SASSproblem原因是它是一个预处理器，所以在SASS中声明的任何变量都需要编译后才能执行。上面的代码将被编译成这样：background-color:#C92E33;这是有效的CSS。代码编译完成后，变量就会消失。因此，我们不能在CSS运行时改变变量值。预处理器中的变量范围归结为嵌套的花括号块。然而，因为CSS变量是属性，它们的范围是基于DOM的。这意味着CSS变量是按元素解析的，而不是按范围解析的，请参见以下示例：body{--shadow-color:red;}button{box-shadow:1px1px1pxvar(--shadow-color);}button:hover{--shadow-color:blue;}当我们将鼠标悬停在按钮上时，按钮的红色变为蓝色。那么使用预处理器语言SASS会有什么结果呢？看代码：body{$shadow-color:gray;}button{box-shadow:1px1px1px$shadow-color;}button:hover{$shadow-color:blue;}这会导致语法错误，第六行使用了一个未定义的变量。因为SASS不知道