如何使用CSS框架（例如Foundation）构建邮件模板？

不能直接用现代CSS框架写邮件模板，因Outlook、Gmail等客户端不支持flex、grid、@media及外部样式表；Foundation for Emails通过Inky语法生成兼容表格结构，并经Gulp内联CSS和转换组件，确保跨客户端稳定渲染。

直接用现代 CSS 框架（比如 Tailwind、Bootstrap）写邮件模板，99% 会失败——不是样式丢失，就是布局塌陷，尤其在 Outlook 和 Gmail 中。Foundation for Emails 不是“CSS 框架”，而是一套专为邮件客户端妥协设计的构建体系，核心在于：用 Inky 抽象语法生成兼容表格结构，再靠 Gulp 内联 CSS + 处理客户端差异。

为什么不能直接用 foundation.css ？

邮件客户端（Outlook Desktop、iOS Mail、Gmail App）不支持大多数现代 CSS 特性：flex、grid、@media 查询（部分支持但行为诡异）、外部 <link> 标签几乎全被忽略。Foundation for Emails 的 foundation-emails.css 是经过特殊处理的：所有样式最终必须内联到 HTML 元素上，且大量使用 table/td 布局模拟响应式效果。

• 直接引入 <link rel="stylesheet" href="foundation-emails.css"> → 大部分客户端直接丢弃整段样式
• 手写 margin/padding → Outlook 会忽略或错算，导致间距失控
• 用 <div class="row"> → 渲染成无意义的 <div>，布局完全失效

<container>、<row>、<columns> 是什么？

它们不是 HTML 原生标签，而是 Inky 模板语言的自定义组件，编译时会被 Gulp + Inky 转换成嵌套 <table> 结构。例如：

<container>  <row>    <columns small="12" large="6">左栏</columns>    <columns small="12" large="6">右栏</columns>  </row></container>

实际输出的是带 width、align、cellspacing 等属性的表格嵌套，确保在 Outlook 中也能按比例渲染。关键点：

立即学习“前端免费学习笔记（深入）”；

• small="12" 对应手机端占满宽度，large="6" 对应桌面端占一半 —— 这些值最终转成 width="100%" 或 width="50%" 的 <td>
• 所有响应式逻辑靠媒体查询 + display: none/block 控制，但只对支持 @media 的客户端生效（Gmail Web 支持，Outlook 不支持）
• 不写 <table> 手动嵌套，是因为 Inky 已固化了兼容性最佳实践，比如强制 mso-line-height-rule: exactly 修复 Outlook 行高

<spacer> 替代 margin 和 padding

邮件里最常踩的坑：用 style="margin-bottom: 20px" 分隔段落 → Outlook 忽略，Gmail 渲染异常。正确做法是用 Foundation 提供的 <spacer> 组件：

<p>标题文本</p><spacer size="24"></spacer><p>正文内容</p>

它会被编译成一个空的 <table class="spacer"><tr><td height="24"></td></tr></table>，高度由 td 的 height 属性控制，所有客户端都认这个。

• size-sm="16" + size-lg="32" 可实现响应式间距，但注意：Outlook 不识别 max-width 或媒体查询，所以 size-sm 在它身上无效，仅靠基础 size 保底
• 不要在 <spacer> 里加文字或样式 —— 它只负责撑开空白，加了反而破坏结构
• 连续多个 <spacer> 会导致不可预测的垂直压缩，优先用单个大尺寸代替多个小尺寸

Gulp 构建流程不可跳过

你写的 Inky 模板（.html）本身不能直接发邮件。必须运行 npx grunt build 或 gulp build，触发以下关键步骤：

• 将 SCSS 编译为内联友好的 CSS（避免 calc()、var() 等不兼容语法）
• 用 inline-css 插件把样式逐个注入到 <table>、<td> 等标签的 style 属性中
• 把 <spacer>、<button> 等 Inky 标签转成真实 HTML 表格结构
• 自动添加 <meta name="format-detection" content="telephone=no"> 等 iOS 专用修复

跳过这步直接发源码 .html → 所有样式失效，Inky 标签原样暴露，客户端当垃圾丢弃。

真正难的不是写代码，而是接受邮件开发本质是“逆向工程”：你不是在写网页，是在给一堆 20 年前的渲染引擎喂它们能咽下的东西。Foundation 的价值不在语法多简洁，而在它把所有已知坑都预填好了——只要老老实实用它的管道，别绕开 Gulp、别硬塞现代 CSS、别手写表格，就能稳住 90% 的客户端表现。