在Divi 5中使用CSS变量来更快地管理样式

CSS变量是Divi高级单元功能更新的一部分。它们提供了一种快速，灵活的方式来管理您的网站外观，对于使用自定义设置的开发人员和设计师特别有用。

随着Divi 5中设计变量的释放，现在可以直接在构建器内实现许多相同的结果。但是，在许多情况下，CSS变量仍然非常有用，尤其是如果您使用的是儿童主题，在全球范围内定义了样式，或者需要高级控制。

想象一下，您已经建立了一个带有数十个标题，按钮和间距规则的网站 - 然后客户说：“使所有物品大10％。”没有变量，您将进行数小时的手动更新。使用CSS变量或Divi的本地设计变量，一项调整可以完成工作。

让我们探讨CSS变量的工作方式！

Divi 5已准备好在新网站上使用，但我们不建议将现有网站转换为Divi 5。

什么是CSS变量？它们如何在Divi 5中起作用？

CSS变量可让您在一个地方保存值（例如颜色或尺寸），并在网站上的任何地方重复使用它们。它们就像捷径可以节省您的时间并保持设计一致。例如，您可以定义一个诸如–padding：20px之类的变量；一次，然后在任何地方使用它在您的网站上创建统一的填充。

在Divi 5中，借助高级单元和设计变量（将变量输入直接输入到视觉构建器）中，CSS变量变得更加易于使用。无论是调整字体尺寸，设置颜色还是调整间距，Divi都可以通过模块设置中的输入字段挖掘变量。这不仅是编码巫师；对Divi界面感到满意的任何人都可以开始使用它们。结果是一种更快，更灵活的方法，可以轻松管理网站的样式。

当Divi 5具有预设时，为什么使用CSS变量？

如果您已经使用了Divi一段时间，那么您可能会喜欢其预设系统，这是有充分理由的。 Divi 5的预设非常适合加快设计过程。但是，随着CSS变量的混音，为什么预设已经做了很多时，为什么要使用它们呢？让我们将其分解，看看这些方法如何一起奏效，以使您的工作流程更加顺畅。

首先，快速刷新预设。元素预设是您节省完全样式的模块设计的首选 - 例如具有自定义颜色，字体和悬停效果的可重复使用的插图，可以在网站上的任何地方放置。只需单击几下即可，您的网站就可以实现设计一致性，而无需付出太大的努力。

然后是选项组预设，将其进一步。这些使您可以为特定样式（例如版式设置或边框设计）保存模块化样式，并在不同的元素中混合并匹配它们。这些预设类型共同提供了一种快速而有条理的方式来管理网站的每个反复出现的方面。

预设具有可重复使用的功能，但它们本质上是静态的。如果在没有引用CSS变量的情况下构建预设，则更新全局样式意味着手动重新审视每个预设。尽管不是交易破坏者，但这使得整个站点的变化降低了动态。这就是CSS变量进入的地方。

用CSS变量解锁站点范围的控制

使用CSS变量，您将获得难以击败的全球控制。定义类似–Pacing：40px;一次，在您的网站上使用它，并且是时候进行更改时，更新一行代码，并立即进行调整。它们也可以用于控制字体大小。例如，您可以为每个标题级别（H1-H6）设置一个变量，然后根据需要调整值，以立即更新网站上的所有标题。

CSS变量不会替换预设或Divi 5的新设计变量 - 它们可以增强它们。想象一下，在预设内使用变量进行混合设置，该设置既可以重复使用又可以调节。

专家提示： CSS变量不会自动响应。如果您要管理响应式样式（例如更改移动设备上的字体大小），请考虑将变量与主题选项中的媒体查询配对。

在Divi 5中设置CSS变量

入门很简单。为了轻松跟随，我们将使用财务顾问入门网站进行Divi。

如何定义CSS变量

Divi 5中有两种简单的方法来设置CSS变量。您可以将其放置在Divi的主题选项或单个页面的设置中。无论您选择哪种方法，您的变量都必须包裹在：全球范围的根。例如，如果您想要整个网站的统一标题样式，则可以通过导航到Divi>主题选项>自定义CSS来定义它们：

:root {
--text-size-h1: 72px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 38px;
--text-size-h5: 30px;
--text-size-h6: 24px;
}

另外，您可以将CSS变量放在页面设置中的页面设置> “高级”>“自定义CSS”中。除非在其他地方重复，否则此处定义的变量只会影响此特定页面上的元素。

在Divi 5中应用变量

要将这些变量应用于您的标题，请打开视觉构建器，并导航到“英雄部分的全宽标头模块”中页面上的第一个H1标题。

接下来，导航到“设计”选项卡并找到标题文本设置。

在标题文本大小字段中，添加var（–text-size-h1） 。

添加后，文本将更新为72px，如我们的变量中所定义。

为您的网站样式使用CSS变量的好处是，您可以毫不费力地即时更新它们。例如，如果您发现H2的变量太大，则可以在Divi主题选项中对其进行修改，该选项将在您的网站上进行更新。

此设置为更快，更智能的风格管理奠定了基础。除了为标题分配CSS变量外，您还可以将它们与预设结合起来，以使您的网站上的更新样式更加容易。

使用CSS变量进行间距

Divi 5中的CSS变量不仅可以控制字体大小。例如，您可以使用它来获得多个模块的一致填充或边距。变量可以统一您的设计，而Divi 5使其变得容易。首先定义Divi主题选项中的间距变量：

:root {
 --spacing: 40px;
}

回到主页上的Visual Builder中，我们将选择一行，单击“盘”，找到“设计”选项卡，然后是间距字段。

将var（ - 间距）放置在田地中，并观察Divi将间距变量应用于blurb。

现在，我们已经看到了用于文本和间距的变量，让我们通过将它们与预设结合起来提高效率来提高一个缺口。

将CSS变量与预设相结合以提高效率

在Divi 5中，您不必在预设和CSS变量之间进行选择 - 您可以同时使用。通过将CSS变量混合到预设中，您可以获得一种混合方法，将两全其美的方法融合在一起：预设的可重复使用和变量的全球控制。

让我们使用Divi的财务顾问入门网站浏览一个快速示例。首先定义Divi>主题选项中的变量>自定义CSS ：

:root {
--text-size: 18px;
}

接下来，前往视觉构建器，打开主页上的全宽头标题模块，然后选择财务顾问主元素预设以编辑它。

悬停在预设上以揭示其设置。单击设置图标以更改它。

切换到“设计”选项卡并找到一个按钮一个设置。在按钮文本大小字段中，添加var（–text-size）。

添加后，您将在FullWidth标头模块中看到对18px的按钮。

最后一步是单击“保存预设”按钮以更新网站上的预设。

现在，当您将财务顾问主要预设分配给网站上的另一个全功能标题时，字体大小将设置为18px，如主题选项中变量中定义的。

您还可以在所有按钮预设中使用变量，从而使您的网站上的所有按钮看起来都一致。如果您决定将来更新按钮的字体大小，请简单地编辑变量的值，并且网站上的每个按钮都会自动更新。

在Divi 5中实现更快的风格管理

Divi 5中的CSS变量是适合您工作流程的快速，可扩展样式管理。他们也不只是一个孤单。它们可以与预设一起用于功能强大且灵活的设置。无论您是在网站上进行微调字体尺寸还是保持间距与一个快速编辑一致，变量都会为开发人员友好地友好地使设计Divi网站变得轻而易举。

Divi 5已准备好在新网站上使用，但我们不建议将现有网站转换为Divi 5。我们鼓励您立即下载Divi 5 alpha，以在下一个Divi项目中尝试CSS变量。这是一个很小的一步，可以付出很大的回报，您会立即感到差异。无论您是喜欢使用预设还是采用CSS优先的方法，Divi 5对变量的支持都将其变成了一个强大的工具，可以更智能，更快地设计网站。