企业官网建设流程全解析

• 前端

Callout（前身为 panel）是 Foundation for Emails 中最实用的布局组件之一：只需一行标签，即可为邮件中的关键内容加上边框、背景色与内边距，让「重要提醒」「操作指引」「促销横幅」在收件箱中一眼可见。本文以 docs/pages/callout.md 为主线，结合仓库中的 Sass 源码、主题配置 与真实模板示例，完整讲解 Callout 的 Inky 用法、五套配色方案与底层样式定制，读完后你可以直接在自己的邮件模板中复用它。

Basics：Callout 的结构与 Inky 用法

Callout 的本质是一个「加了边框、背景和内边距」的容器。由于邮件客户端只认表格布局，Callout 在编译后会生成一套完整的 table 结构：外层<table>上应用.callout类（负责底部外边距），最内层的<th>上应用.callout-inner类（负责边框、背景与内边距）。

如果你使用 Inky 模板语言（Foundation for Emails 的推荐写法），不需要手写任何 table——直接写<callout>标签，Inky 就会自动为你生成上述表格结构。<callout>可以包住一整行（<row>），也可以放在某个<columns>列内部。

下面这段示例来自官方文档：左侧列的文字不在 callout 内，右侧列的文字被包在.secondary配色 callout 中；第二个 callout 则包住了整行内容。

<row> <columns small="6"> <p>Not in a callout :(</p> </columns> <columns small="6"> <callout class="secondary"> <p>I'm in a callout!</p> </callout> </columns> </row> <callout class="primary"> <row> <columns small="12"> <p>This whole row is in a callout!</p> </columns> </row> </callout>

在实际使用中两种场景都很常见：把 callout 塞进列里用于局部高亮，或用 callout 包裹整行内容制造「整段强调」的视觉区域。仓库的视觉测试页 test/visual/pages/callout-in-grid.html 甚至演示了在 callout 内部再嵌套一个双列<row>的复合布局，说明 callout 与网格组件可以自由组合。

配色类：五套预设语义色

Callout 的颜色通过追加类名切换，支持.primary、.success、.warning、.alert四种语义色；不加任何颜色类时，背景为白色（实际取$callout-background的默认值$white）。

<callout> <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </callout> <callout class="primary"> <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </callout> <callout class="success"> <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </callout> <callout class="warning"> <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </callout> <callout class="alert"> <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </callout>

注意 Inky 也支持像<callout class="secondary">这样的.secondary类（文档示例中就有），只是官方文档的配色清单里把它放在了primary/success/warning/alert之外，属于第五种可配色。各色对应的基底色定义在 scss/settings/_settings.scss：

源码剖析：Callout 的样式究竟如何生成

要理解 Callout 为什么在各类邮件客户端中表现稳定，可以看它的实现源码 scss/components/_callout.scss。核心规则只有两组：

table.callout { margin-bottom: $callout-margin-bottom; Margin-bottom: $callout-margin-bottom; } th.callout-inner { width: 100%; border: $callout-border; padding-top: $callout-padding; padding-right: $callout-padding; padding-bottom: $callout-padding; padding-left: $callout-padding; background: $callout-background; &.primary { background: $callout-background-primary; border: $callout-border-primary; color: $black; } // .secondary / .success / .warning / .alert 依此类推 }

这里有两个值得注意的实现细节：

1. table.callout上同时写了小写margin-bottom和大写Margin-bottom——这是 Foundation for Emails 的 Outlook 兼容惯例，大写属性专门喂给 Word 渲染引擎（Outlook 只认大写形式的 margin），确保 callout 在 Outlook 中也不会挤压到后续内容。
2. 配色类的边框与背景色不是直接取色，而是经过计算：边框统一为「基底色降低 20% 亮度」的 1px 实线（color.adjust($color, $lightness: -20%)），背景则用color.scale($color, $lightness: $callout-background-fade)向白色方向淡化 85%，同时文字强制为$black，保证任何配色下正文都有足够对比度。

通过 Sass 变量定制 Callout

Callout 的全部外观都由可覆盖的 Sass 变量控制，默认值集中在 scss/settings/_settings.scss（组件源码中同样以!default声明，见 scss/components/_callout.scss）。在自定义主题文件中覆盖这些变量即可全局改变所有 callout 的观感：

例如要做出更「重」的高亮卡片，可以在自己的 settings 中覆盖：

$callout-padding: 20px; $callout-background: #fefefe; $callout-background-fade: 70%; // 让配色背景更饱和

该组件通过 scss/foundation-emails.scss 中的'components/callout'被引入主样式文件，属于默认启用的核心组件，无需额外开关。

实战场景：侧边栏面板与正文强调

Callout 最经典的实战用法是「侧边栏面板」。官方模板 templates/sidebar.html 中，右侧large="5"的列里连续嵌套了三个class="secondary"的 callout，分别承载标题链接区、社交按钮区和联系方式区，形成清晰的侧边栏视觉分组：

<columns large="5" class="sidebar"> <callout class="secondary"> <h5>Header</h5> <p class="lead">Sub-header</p> <p><a href="#">Just a Plain Link &raquo;</a></p> </callout> <callout class="secondary"> <h6>CONNECT WITH US:</h6> <button class="facebook expand" href="#">Facebook</button> <button class="twitter expand" href="#">Twitter</button> </callout> </columns>

另一个典型场景是正文中的「重点提示」：基础模板 templates/basic.html 在介绍性段落之后插入class="primary"的 callout 来强调附加说明；templates/hero.html 则在 hero 区域使用 callout 突出主行动信息。此外 callout 还能与响应式可见性类叠加——视觉测试页 test/visual/pages/visibility.html 就展示了<callout class="primary hide-for-large">、<callout class="show-for-large alert">这类组合，实现「小屏显示提示、大屏显示警报」的分屏内容策略。

小结

Callout 是 Foundation for Emails 中性价比极高的组件：用 Inky 的<callout>标签即可免写表格，用.primary/.success/.warning/.alert类即可切换语义配色，通过scss/settings/_settings.scss中的$callout-*变量即可全局定制外观。无论是侧边栏面板、交易提醒还是促销横幅，Callout 都能以最稳妥的 table 结构跨客户端呈现。若想进一步了解<callout>之外的其他 Inky 标签（<row>、<columns>、<button>、<menu>等），可继续阅读 Inky 模板语言指南。

• 前端