不能直接用现代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% 的客户端表现。
