CSS中变量的基本教程

本文主要介绍CSS中有关变量的基本教程，这是CSS入门学习的基本知识，需要的朋友可以参考一下。
CSS中的变量给我们带来了许多好处：便利性、代码重用、更可靠的代码库和提高防止错误能力的能力。
样品

CSS代码将内容复制到剪贴板。
根{
——基础字体大小：16px；
-链接颜色：# 6495ed；
}
{ p
字体大小：var（基本字体大小）；
}
{
字体大小：var（基本字体大小）；
颜色：var（链接颜色）；
}

基础

当使用CSS变量时，您应该理解三个主要组件：

自定义属性
Var（）函数
根伪类

自定义属性

您已经知道CSS的一些标准属性，如颜色、边界、宽度和字体大小。
下面的示例使用CSS的颜色属性：

CSS代码将内容复制到剪贴板。
{体
颜色：# 000000；颜色的CSS属性 / * * /
}

自定义属性只意味着我们（创建CSS文件的人）定义属性的名称。
为了自定义属性名，我们需要使用它作为前缀。
如果我们想创建一个名为文本颜色的黑色值的自定义属性，我们可以这样做：

CSS代码将内容复制到剪贴板。
根{
文本颜色：# 000000自定义属性命名； / * / 文本颜色
}

Var（）函数

为了应用自定义属性，您需要使用var（）函数，否则浏览器不知道它们代表什么。
如果您希望在p、H1和H2的样式中使用文本颜色，可以使用var（）函数：

CSS代码将内容复制到剪贴板。
根{
文本颜色：# 000000；
}
{ p
颜色：var（文本颜色）；
字体大小：16px；
}
{ H1
颜色：var（文本颜色）；
字体大小：42px；
}
{ H2
颜色：var（文本颜色）；
字体大小：36px；
}

它相当于：

CSS代码将内容复制到剪贴板。
{ p
颜色：# 000000；
字体大小：16px；
}
{ H1
颜色：# 000000；
字体大小：42px；
}
{ H2
颜色：# 000000；
字体大小：36px；
}

根伪类

我们需要一个放置自定义属性的地方。虽然您可以在任何样式规则中指定自定义属性，但是在任何地方都定义属性不是一个好主意，这对CSS的可维护性和可读性是一个挑战。

根伪类表示html文档的根元素。这是放置自定义属性的好地方，因为我们可以通过其他更具体的选择器覆盖自定义属性值。
CSS变量的好处
可维护性

在Web开发项目中，我们经常使用特定的CSS属性值：

CSS代码将内容复制到剪贴板。
{ H1
边距：20px；
字体大小：42px；
线高度：120%；
颜色：灰色；
}
{ p
边距：20px；
字体大小：18px；
线高度：120%；
颜色：灰色；
}
{ IMG
边距：20px；
border: 1px solid灰色；
}
{。标注
边距：20px；
边境：3px实心灰色；
边界半径：5px；
}

当您需要更改某些属性值时，问题就会暴露出来。
如果我们手动更改属性的值，尤其是CSS文件大的时候，不仅花费大量时间，而且可能会犯一些错误。同样，如果我们执行批处理查找和替换，我们可能会无意中影响其他样式规则。
我们可以用CSS变量重写：

CSS代码将内容复制到剪贴板。
根{
——基础bottombottom保证金：20px；
-基线高度：120%；
-文本颜色：灰色；
}
{ H1
利润率底：VAR（--基地bottombottom保证金）；
字体大小：42px；
线高度：var（基线高度）；
颜色：var（文本颜色）；
}
{ p
利润率底：VAR（--基地bottombottom保证金）；
字体大小：18px；
线高度：var（基线高度）；
颜色：var（文本颜色）；
}
{ IMG
利润率底：VAR（--基地bottombottom保证金）；
灰色边框1px solid；
}
{。标注
利润率底：VAR（--基地bottombottom保证金）；
border: 1px solid灰色；
边界半径：5px；
颜色：var（文本颜色）；
}

假设您的客户说，因为文本太亮，文本很难读取，如果我们想改变文本的颜色，我们只需要更新一行CSS规则。

CSS代码将内容复制到剪贴板。
-文本颜色：黑色；

提高CSS的可读性

自定义属性使样式表更具可读性，也使CSS属性声明更多的语义。
让这句话

CSS代码将内容复制到剪贴板。
背景颜色：黄色；

与下面的语句比较

CSS代码将内容复制到剪贴板。
背景颜色：var（-高亮颜色）；
字体大小：var（基本字体大小）；

像一类属性值的黄色和18px并没有给我们任何有用的上下文信息，但是当我们读如--基础字体大小和颜色作为属性名称，甚至在其他人的代码，我们可以立即知道该属性值是在做什么。
注意事项
案例的敏感性

自定义属性区分大小写（与普通CSS规则不同）

CSS代码将内容复制到剪贴板。
根{
-主BG颜色：绿色；
——main-bg-color：红色；
}
{。箱
背景颜色：var（主要是BG颜色）；绿色背景
}
{。圈
background-color：VAR（-- main-bg-color）； / * * /红色背景
边界半径：9999em；
}
。箱，
{。圈
身高：100px；
宽度：100px；
边距：25px；
盒尺寸：填料盒；
40px垫上；
文本对齐：中心；
}

自定义属性值的解析

当一个定制属性被多次声明时，它的赋值遵循通常的CSS堆栈和继承规则：
HTML

xml代码将内容复制到剪贴板。

链接

CSS

CSS代码将内容复制到剪贴板。
根{
-高亮颜色：黄色；
}
{体
-高亮显示颜色：绿色；
}
{容器。
-突出显示颜色：红色；
}
{
颜色：var（-高亮颜色）；
}

当删除容器规则时，链接的颜色值将为绿色。
回归价值

当使用var（）函数时，可以分配一个回归属性值，它作为一个附加参数和第一个参数分开：
HTML

xml代码将内容复制到剪贴板。
一盒

CSS

CSS代码将内容复制到剪贴板。
{ div
集装箱BG颜色：黑色；
}
{。箱
宽度：100px；
身高：100px；
40px垫上；
盒尺寸：填料盒；
背景颜色：var（容器颜色，红色）；
颜色：白色；
文本对齐：中心；
}

因为背景参数传递给VaR（），所以div的背景颜色被渲染为红色。
无效的值

注意将错误类型的值分配给CSS属性。
在下面的例子中，因为自定义属性--小按钮分配一个长度单位，它在the.small-button风格是无效的。（注意：因为颜色的属性类型值是错误的）。

CSS代码将内容复制到剪贴板。
根{
小按钮：200px；
}
{小按钮
颜色：var（小按钮）；
}

避免这种情况的一个好方法是对自定义属性的名称进行描述。
对CSS变量的浏览器支持

CSS变量很容易使用，但是浏览器的支持不是很好：