了解CSS变量（以及如何使用它们）

已发表: 2025-07-13

CSS变量就像可重复使用的设计成分一样。您将它们定义为品牌颜色，字体大小或间距，然后在需要的任何地方使用它们。它们使您免于在不同部分键入相同的十六进制代码和像素值。

他们最大的好处是他们很容易更新。如果您一次更新一个变量，则使用的每个地方也会反映更改。因此，您不仅避免在多个部分中手动重复相同的值，而且还可以通过更改一个值来调整整个网站的外观。

在这里变得更好：使用Divi 5，您无需编写任何代码即可使用CSS变量。 Divi的设计变量可让您在视觉，无代码工作流程中使用它们。好奇它是如何工作的？继续阅读。

目录
  • 1什么是CSS变量？
    • 1.1 CSS变量如何工作
    • 1.2了解CSS变量级联
    • 1.3添加后备值
  • 2一种在Divi 5中使用CSS变量的无代码
    • 2.1定义Divi 5中的CSS变量
  • 3 Divi 5如何使CSS变量工作流程毫不费力
    • 3.1 1。创建您的设计框架
    • 3.2 2。使用选项组预设进行灵活样式
    • 3.3 3。声明自定义CSS变量以进行更多控制
  • 4 Divi为CSS变量提供了内置方法

什么是CSS变量？

将CSS变量视为您为自己的设计习惯创建的自定义标签。您最喜欢的图像边框半径是什么？您通常在各节之间留多少间距？您是否在任何地方使用签名按钮颜色？您可以将所有这些独特样式变成CSS变量。

这些不是浏览器默认知道的值。一切都是自定义的。您可以决定名称，分配您的首选值，然后在任何需要的地方使用它。这就像创建自己的速记，使造型更快，更清洁且以后更易于更新。

让我们举个例子。假设您希望您的网站的主要颜色为＃007BFF。您会这样声明：

:root {
--primary-color: #007bff;
}

在这里，“ - 主要色”是您的变量名称，“＃007BFF”是其值。您刚刚在浏览器可以识别的自定义标签中存储了一种颜色。

要使用它，您不会重写十六进制代码。您将其调用var（）函数中的变量：

 button {
background-color: var(--primary-color);
}

一行代码可确保您的按钮始终从–primary-Color中提取值。

现在，您可以在需要的地方使用它，并且是时候更新品牌颜色了，就无需挖掘数十个文件。只需更改一个变量，它使用的每个元素都会自动更新。例如，您的按钮，标题和边界都使用 - 主要色。单个编辑将全部更新。

这就是CSS变量简化网站范围更新的方法。

CSS变量如何工作

要声明CSS变量，基本语法看起来像这样：

.root {
--name: value;
}

有几件事要注意。首先， CSS变量总是以两个破折号开始（ - ）。这就是浏览器知道它的自定义的方式，这是您为设计系统定义的。

内置的CSS属性（例如字体大小，颜色或填充）已经具有意义。浏览器确切地知道该如何处理它们。但是自定义属性是空白标签，直到您为它们分配一个值。您正在网站项目中创建自己的设计规则，例如 - 彩色，并告诉浏览器它的代表。

定义CSS变量的地方也有很大的不同。

当您将其放在：根选择器中（就像我们上面所做的那样）时，它将变成全局。这意味着您可以在任何页面和元素上使用变量。那是因为：root针对HTML的顶级元素，通常是<html>标签。

但是，如果您在特定类或选择器中定义了相同的变量，则仅在该位置起作用。像这样：

 .card {
--bg-color: #f4f4f4;
}

在这里，–bg-color仅适用于.Card选择器。尝试在其他地方使用它，并且不会出现。例如，下面您会看到两张卡。

本地声明为CSS变量

卡1使用在.card容器内声明的本地定义变量-CARD-BG。该变量仅在该容器内部起作用。它不适用于卡3。

本地定义的CSS变量在其他容器上无法使用

另一方面，卡2从–Global-Color中拉出其背景，该背景在以下方面定义：root。这就是为什么Card 4也可以选择相同的颜色的原因。它可以访问全局变量。

根CSS变量工作

作为最佳实践，如果您希望在整个网站上保持一致性，请始终以：root定义CSS值。如果您在本地定义了一个变量并忘记了它，但是现在它没有按预期工作？您将通过设置后备值来解决此问题。我们将在一段时间内谈谈。

了解CSS变量级联

您可能熟悉“级联”一词。好吧，CSS变量也级联，但这是什么意思？

如果在全球（root）和局部（类或容器内部）上同时定义了变量，则浏览器将始终将一个更接近元素使用。这就是级联在CSS中工作的方式。更接近的规则优先。

这正是黑暗模式的工作方式。

例如，您可以定义–Text-Color：Black in：root。但是在.dark-Mode的容器中，您可以将其重新定义为白色。因此，当用户在“暗模式”选项上切换时，即使变量名称保持不变，浏览器也将在.dark模式内使用本地版本。

黑暗模式示例

这使您可以在基于上下文调整样式的同时保持命名一致。这是CSS变量超越简单可重复性的一种方式。他们根据使用的位置和方式来适应。

添加后备值

有时，您可能会引用不可用的CSS变量。也许它只是在特定部分中定义的，或者错误地将其删除。发生这种情况时，浏览器不知道该怎么办。依赖于该变量的样式根本不会应用。

您可以直接在var（）函数中添加一个后备值，以防止这种情况。如果缺少原始变量，它将用作备份。这是其工作原理：

 h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
}

这告诉浏览器使用 - 如果存在 - 饰面。如果不是，请改用黑色（＃000）。

当构建可重复使用的组件或跨变量可能不总是可用的多个部分工作时，后备尤其有用。它们使您的设计保持稳定和一致。

您甚至可以链条后备，例如颜色：var（accent-color，var（ - primary-color，＃333））;

在这里，浏览器首先检查–Accent-Coloror。如果缺少，它会尝试 - 主要色。如果也缺少，则默认为＃333。这为您的样式提供了安全网，因此即使缺少某些值，它们也会继续正确渲染。

在Divi 5中使用CSS变量的一种无代码

您看到的有关CSS变量的所有内容（全局控制，可重复使用的值，级联逻辑）听起来很棒，但它也带有一个捕获：您需要编写和管理代码。对于许多设计师来说，这不是理想的。如果您喜欢视觉设计怎么办？这意味着您不能使用CSS变量，对吗？错误的。

Divi 5为您提供了一种使用相同CSS变量逻辑的更快，更视觉上的方式。它引入了设计变量，这是Divi Builder构建的CSS变量的无代码替代方案。

订阅我们的YouTube频道

设计变量（例如CSS变量）是您定义一次并在网站上使用的可重复使用的值。不同的是您的做法。您不会在网站的样式表中定义它们，而是在视觉上在Divi Builder内部的变量管理器中定义它们。

Divi 5中的变量经理

像CSS变量一样，您给出设计变量一个名称并分配值。保存后，它将在支持该属性的任何模块中可用。

应用保存变量也很容易。只需通过悬停在模块的设置选项上来找到变量管理器图标，单击它以填充所有保存的变量，然后选择要应用的变量即可。

关于设计变量的最好的部分不仅是设计值，而且还可以保存可重复的内容值，例如图像，链接和文本字符串。这样，您可以通过在整个网站中重复使用无手动工作来有效地管理重复的内容。

在设计变量中保存可重复的内容值

了解有关Divi 5的设计变量的所有内容

定义Divi 5中的CSS变量

这意味着设计变量替换CSS变量吗？不完全是。

设计变量非常适合存储您经常使用的值，例如品牌颜色，但并非每种样式都需要全球。您将不一定总是想将所有小调作为设计变量保存，尤其是当它是单个页面唯一的时。

假设您正在使用自定义英雄部分创建着陆页。高度与网站上的其他任何内容都不同，您不太可能重复使用它。将其保存为设计变量并不是您全球库的最佳用途。在这种情况下，直接在页面设置中定义CSS变量是一个更干净的选择。

同样的是复杂或一次性布局。也许您需要自定义的突出显示颜色或仅在此上下文中相关的特定布局间距值。您可以在需要的地方定义CSS变量，而不是将系统拥挤，而是永远不会重复使用。

我们不希望您用设计变量替换CSS变量。我们希望您同时使用两者。

这就是为什么Divi 5使定义CSS变量变得容易的原因。您可以轻松地在页面设置内部声明自己的CSS变量>“高级”>“自定义CSS” ，就像在常规CSS中一样。

定义Divi 5中的CSS变量

但是我们确实简化了他们的应用程序。定义后，您可以在该页面上使用这些变量。转到任何模块，从高级单位下拉列表中选择CSS var ，然后在Var（）函数中输入变量名。

这种方法在需要时为您提供灵活性，而无需您将所有内容都投入到视觉设计变量系统上。这是结构和创造自由之间的平衡。

在Divi 5中使用CSS变量

Divi 5如何使CSS变量工作流程毫不费力

现在您知道CSS变量是什么，以及Divi 5如何在视觉上支持它们，这就是为什么这确实重要的原因。这不仅是因为Divi为您提供了两种使用CSS变量的方法。这是因为它使它们与您的工作流程顺利集成。

您可以轻松地使用具有功能强大功能的CSS变量，例如设计变量，选项组预设和高级单元。您仍然可以获得传统CSS的所有灵活性和可扩展性，但是除非您选择，否则您没有编写一行代码。

让我们浏览Divi 5如何使这种工作流程栩栩如生。

1。创建您的设计框架

设计变量确实很强大，因为您可以在视觉上构建整个设计框架，因此造型页面只需单击几下即可。我们建议您从您的基本设计元素（例如字体尺寸，间距单元和品牌颜色）开始，因此您将它们全部放在一个地方。

然后，您还可以保存经常使用的内容，例如文本字符串，URL和图像。例如，一个共同的背景图案，在不同部分，社交媒体链接，电子邮件，地址等之间重复出现。

一旦将框架安装到位，一切都会变得更加容易。您无需返回根本样式图即可找到变量或记住确切的名称。 Divi为您组织它们： “颜色”选项卡中的颜色， “字体”选项卡中的字体，以及在变量管理器中访问。

保存的变量在变量管理器中井井有条

而且，当您的网站需要设计更新时，您不会浪费时间来编辑模块，也不会浪费长时间的样式表。您将一次在变量管理器中更新保存的值，并且更改在每个实例中立即适用。

相同的CSS级控制，但无需记住，写作或调试任何内容。

2。使用选项组预设进行灵活样式

期权组预设可为您提供对设计系统的更详细的控制。您可以为不同的用例创建多个设计选择，而不是在网站上应用一组样式，所有这些选择都是由相同的基础设计变量构建的。

在这里，您正在分层。您在变量管理器中定义核心值一次，然后创建从这些值中提取但以略有不同方式应用它们的不同预设。如果您曾经更新保存的变量值，则该更改会立即反映出所有预设和应用的模块。

这种基于预设的设计系统可帮助您创建无限的样式组合。例如，您可能使用相同的字体大小变量，但具有不同的间距，权重或文本变换，因此您可能有一种针对主页英雄的标题样式，而博客标题的另一种标题样式。

结构保持干净。样式保持一致。并且在需要时，您可以在模块级别上覆盖任何预设。因此，您可以在不失去创意自由的情况下获得全系统的控制。

3。声明自定义CSS变量以进行更多控制

如您所知，Divi不会将您拒之门外。如果要定义自己的CSS变量，则可以通过页面设置>“高级>自定义CSS”绝对这样做。但这不是有趣的部分。

有趣的是，它允许您使用clamp（）和cal（）（感谢高级单元）（感谢高级单元）等功能强大的CSS函数来视觉上构建流体，响应式布局。您还可以将保存的CSS变量用作设计变量的值。

这可以帮助您构建一个更相互联系的设计系统。您的CSS逻辑和视觉样式不再存在于单独的孤岛中。您可以在CSS中定义一个值，并在需要时视觉上从其视觉上拉出一个值。它可以使您的工作流液保持，可扩展且易于维护。

您可能会发现这是压倒性的，但是一旦您了解了它是如何一起工作的，就再也没有回头路了。它改变了您设计，思考和构建的方式。从变量系统开始的开始，很快就变成了您的设计语言。是的，这些工具很强大，但是它们本来要围绕您的流程形成。花点时间，探索适合自己的风格，并建立适合您的工作流程。

Divi为CSS变量提供了内置方法

使用CSS变量设计，用于在灵活性和复杂性之间进行选择。 Divi 5擦除了变量，视觉控制，网站范围更新和分层逻辑的全部功能，成为直观且可扩展的工作流程。

您不必在自定义CSS和无代码设计之间进行选择。随着项目的增长，您可以混合，匹配和发展系统。一旦您看到这可能是多么平稳和强大，就很难想象建立其他任何方式。但是为此，您需要控制自己。

尝试为自己尝试Divi 5，并建立一个与您合作的设计系统，而不是与您不利。

下载Divi 5learn更多有关Divi 5的信息