如何添加 CSS 变量来自定义 WordPress 子主题

CSS 变量，也称为 CSS 自定义属性，允许在 CSS 样式表中轻松重用。

如果您已经完成了 WordPress 子主题的工作，您可能会发现自己做了很多样式设置并覆盖了颜色、填充等内容。如果您是网页设计新手，值得一提的是，使用 plain 并没有错CSS。 CSS 变量是可选的，随着您变得更高级，您将开始看到变量如何使您受益。

这些并不是为了取代 CSS 预处理器，最流行的是 SASS。 许多构建器专门将 SASS 用于大型项目，并且将 CSS 变量作为核心部分，它提供了许多高级选项。

但是，如果您以前使用过预处理器，您就会知道它们需要经过编译才能输出 CSS。 因此，本教程将重点介绍 CSS 变量，而不会深入介绍预处理器的细节。

CSS 变量是一种令人愉快的媒介，幸运的是，有强大的浏览器支持。 在承诺在生产中使用 CSS 变量之前，请务必检查我可以使用以确保它们具有您需要的支持。

CSS 变量比使用纯 CSS 更有效，但不需要像 SASS 这样的高级设置。 浏览器进行“编译”，您不依赖于输出编译后的 CSS 的设置和环境。

这种方法是一个很好的项目，适合设计简单的 WordPress 子主题等。 对于这样的项目，往往需要更新样式以创建品牌主题。 CSS 变量可以提供帮助，因为它们提供了一个可管理的样式覆盖列表，并且不需要特殊的环境来将 SASS 编译为 CSS。

免费获取 Genesis Framework 和 StudioPress 主题！

WP Engine 客户可以访问每个计划标配的一套高级 WordPress 主题！ 您只需每月 20 美元即可开始构建您的下一个站点！ 在这里了解更多。

如何使用 CSS 变量

当使用特定的颜色来保留品牌时，一个常见的要求是拥有一个可以反复使用的品牌调色板。 每次输入相同的颜色值是多余的。 另外，如果您想更改集合中的其中一个颜色值怎么办？

例如，蓝色可能需要稍微深一点。 这事儿常常发生。 是的，当然有可靠的查找和替换功能。 但是，在进行此全局更改时以及重用变量时，在一个地方调整值会更有效。

这是CSS变量的样子：

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

当我简化 WordPress 子主题样式的工作流程时，我已将变量添加到我的styles.css文件中。 这只是“短名单”，随着更多人的加入，有效地命名每个变量变得很重要。

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

var() 函数

变量实际是如何使用的？ 这很简单。 首先，声明变量，然后在所需的 CSS 规则集中使用它。

范围是需要注意的重要事项。 变量需要在其预期范围内的 CSS 选择器中声明。 在许多情况下，您需要变量在全局范围内可用，这样它们就可以被任何东西访问。 您可以为全局范围使用:root或body选择器。 但是，在某些情况下，您可能需要限制范围，并希望使用局部范围的变量。

很容易发现变量； 他们前面有两个破折号。 需要包含两个破折号 (–)。

var()的语法非常简单：

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

不是在多个地方调整颜色，而是在一个地方调整变量值。

Web 检查器（在本例中为 Chrome）允许您检查并查看正在使用的变量。

以下示例首先定义名为--light-gray和--text-black全局自定义属性。 调用var()函数，稍后将自定义属性的值插入到样式表中：

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

值得一提的是，变量在处理 CSS 断点时非常有用。 通过在不同的断点中使用全局范围的变量，可以为各种尺寸定制填充和其他有用的样式。

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

下面是可以在本地范围内找到的变量示例。 到目前为止，我们只触及了全局范围，因此您会注意到事情并不在根目录中。 这些是警告消息的样式。 此处声明的警告文本颜色仅对此类有用。 另外，值得注意的是calc也可以使用。

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

上面的示例涵盖了 CSS 变量的基础知识。 这些概念可以应用于自定义 WordPress 主题或您编写的任何其他自定义 CSS。 与纯 CSS 相比，变量具有优势，并且可以帮助您在进行站点范围的更改时更有效地工作。 它们允许更好地组织样式表，而无需预处理器。

使用 WP Engine 激发创作的自由

WP Engine 支持在 WordPress 上自由创作。 该公司的产品是所有 WordPress 提供商中速度最快的，为 150 万种数字体验提供支持。 世界上排名前 200,000 的站点中有更多的站点使用 WP Engine 来增强他们的数字体验，这比 WordPress 中的任何其他站点都要多。 在 wpengine.com 上找到我们的更多信息或立即与代表交谈！