CSS Variables

CSS 变量用于将自定义属性的值添加到我们的网页中。自定义属性有时也被称为级联变量或CSS 变量。作者定义这些包含特定值的实体，并可以在整个文档中重复使用。这些实体使用自定义属性符号进行设置，并可以通过 var() 函数进行访问。

变量存储值，并在其可以使用的范围内生效。

CSS 变量的优点在于，它们允许我们在多个地方重用相同的值。与颜色值相比，变量名更容易理解和使用。

CSS 中的变量定义时，开头使用两个连字符（--），后跟变量名，变量名是区分大小写的。

在上面的语法中，element 表示选择器，它指定了自定义属性的作用域。如果我们在 :root 伪类上定义自定义属性，那么它将全局应用于我们的 HTML 文档。自定义属性的名称是区分大小写的，即 --main-color 和 --Main-color 将被视为不同的自定义属性。

var() 函数

CSS 中的 var() 函数用于插入自定义属性值。变量名可以作为参数传递给 var() 函数。

语法

参数

var() 函数只允许两个参数，定义如下：

--custom-name: 此参数接受自定义属性的名称。它必须以两个连字符 (--) 开头。这是必需参数。

value: 这是一个可选参数，接受备用值。当自定义属性无效时，它将作为替代值使用。

备用值不用于修复浏览器兼容性。当任何浏览器不支持自定义属性时，备用值将无用。备用值作为浏览器支持 CSS 自定义属性时，在变量值无效或未定义时选择不同值的替代。

以下是一些定义备用值的有效和无效方式：

现在，让我们通过一些插图来理解 CSS 变量。

示例

输出

在上面的示例中，我们没有使用备用值。现在，在下一个示例中，我们将使用备用值。

示例

在此示例中，有一个 CSS 变量 --text-color，但未设置，因此将使用备用值作为变量的替代。

输出

calc() 与 var() 的结合使用

我们可以在变量值上使用 calc()。让我们看一个在其中使用 calc() 函数与 var() 函数的示例。

在此示例中，我们使用 calc() 函数与 var() 函数来调整元素的 padding 和 font-size。

示例

输出