在 Bricks 中使用 Automatic.css 框架

2022 年 8 月 18 日更新：以下内容已不是最新，请以 Automatic.css 官方提供的文档与视频为准。

Automatic.css 是一款优秀的 CSS 框架，提供丰富的工具类（utility classes）与 CSS 变量，可实现自动响应式、可伸缩以及流体的字号与间距。

在 Automatic.css（下文简称 ACSS）与 Bricks 的原生兼容/集成推出之前，只要做一点设置，今天你就能享受到它绝大部分乃至全部的好处。关于用代码片段插件管理这类注入，可参考 在 Bricks 中使用 WPCodeBox 管理专属代码片段。

第一步：让 ACSS 在 Bricks 之后加载

要让 ACSS 的 CSS 文件在 Bricks 的 CSS 之后加载。

使用代码片段管理器（我推荐并使用 WPCodeBox），新建一个在前端加载的 PHP 片段：

• 标题：Load Automatic.css after Bricks’ css
• 代码：

<?php
add_action( 'wp_enqueue_scripts', 'bl_dequeue_acss', 11 );
function bl_dequeue_acss() {
	wp_dequeue_style( 'automaticcss' );
}
add_action( 'wp_enqueue_scripts', 'bl_enqueue_acss', 11 );
function bl_enqueue_acss() {
	wp_enqueue_style( 'automaticcss' );
}

这仅在 Bricks → Settings 中的 CSS Loading Method（CSS 加载方式）为默认的 Inline Styles（内联样式）方式时才有效。

第二步：在主题样式中建立调色板

在 Bricks 编辑器中进入 Theme Styles（主题样式）。

新建一个名为 Global 的样式，并应用到整个网站。

进入 COLORS，调出任意颜色选择器，创建一个名为 AutomaticCSS 的新调色板，用 ACSS 的十六进制值把它的颜色添加进来。

不要在「Primary Color」之类的属性中应用/选择任何颜色。

第三步：获取 Bricks 变量名

添加一个临时 Container。

在其中添加五个 Heading（标题），分别应用上一步设置的颜色。

在前端检查每个标题，记下 Bricks 的变量名。

用如下格式记下它们：

Primary: --bricks-color-tweanc
Secondary: --bricks-color-awispc
Accent: --bricks-color-yycmbl
Base: --bricks-color-bjlkhz
Shade: --bricks-color-wnpgtl

先不要删除这个 Container。

第四步：用 CSS 覆盖 Bricks 变量

在前端、Header 位置添加一个 CSS 代码片段。

• 标题：Override Bricks’ CSS for ACSS
• 代码：

:root {
    --bricks-color-tweanc: var(--primary);
    --bricks-color-awispc: var(--secondary);
    --bricks-color-yycmbl: var(--accent);
    --bricks-color-bjlkhz: var(--base);
    --bricks-color-wnpgtl: var(--shade);
}
a {
    color: var(--primary);
}
#bricks-toolbar a,
#bricks-popup.docs .title-wrapper .close,
#bricks-popup.docs .title-wrapper .link {
    color: currentColor;
}
.bricks-button {
    line-height: normal;
}
.brx-container.root:not(.pad-header--xs):not(.pad-header--s):not(.pad-header--m):not(.pad-header--l):not(.pad-header--xl):not(.pad-header--xxl) > .brx-container {
    padding: var(--section-space-s) var(--section-padding-x);
}

把 tweanc、awispc 等替换成你站点上实际的字符串（参见前面的步骤）。

保存并启用。

第五步：为编辑器单独覆盖

再创建一个上面代码片段的副本，命名为「Override Bricks’ CSS for ACSS – Builder」，但这次通过设置条件为「Page URLs 包含 ?bricks=」并选择 footer 位置，让它仅在 Bricks 编辑器中生效。保存并启用。

无论你在 Bricks 的哪里应用这些颜色，本质上都会被 ACSS 设置中的值所覆盖。

现在，如果你从 Bricks 任意控件调出颜色选择器、并从 AutomaticCSS 调色板中更改任意颜色，你会看到颜色只会在选择器中发生变化。

而编辑器与前端真正应用的颜色，仍然取自 ACSS 的设置。

现在你可以删除那些标题 Container 了。

第六步：设置根容器宽度

编辑你的 Global Theme Style → GENERAL → CONTAINER。

把 Root Container Width（根容器宽度）设为你在 ACSS 设置中的值（默认：1280 px）。

第七步：导入 ACSS 类

在 Bricks 中导入 ACSS 的类，这样当点击任意元素的 ID/Class 输入框时，就会显示全部类列表。

感谢 Keviin Cosmos 在 Bricks 的 Facebook 群组和这里的评论区分享了做法。

我直接把 /wp-content/plugins/automaticcss-plugin/config/classes.json 从 Automatic.css v1.3.2 转换并重新格式化，使其兼容 Bricks。可从这里下载。

在编辑任意页面/模板时，在 Bricks 编辑器中选择任意元素并点击它的 ID。

点击 Import（导入）图标，把下载的文件从你的电脑拖拽过来。它会添加约 950 个类。

注意

• 对于按钮，添加类似 btn--primary 的框架类。
• 要为 header 的容器减少垂直内边距，可应用类似 pad-header--m 的类。
• 随时备好 Automatic.css 速查表。

小结

通过「调整 ACSS 的加载顺序 + 用 ACSS 变量覆盖 Bricks 颜色/间距变量 + 为编辑器单独覆盖 + 导入 ACSS 类」，你就能在 Bricks 中顺畅使用 Automatic.css 的流体排版与工具类体系。虽然原生集成仍在等待中，这套设置已能覆盖绝大部分日常需求。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程