不能直接用现代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"> → 渲染成无意义的 <code><div>，布局完全失效 <h3> <code><container></container>、<row></row>、<columns></columns>是什么？它们不是 HTML 原生标签，而是 Inky 模板语言的自定义组件，编译时会被 Gulp + Inky 转换成嵌套
<table> 结构。例如： @@######@@ <p>实际输出的是带 <code>width、align、cellspacing等属性的表格嵌套，确保在 Outlook 中也能按比例渲染。关键点：-
small="12"对应手机端占满宽度，large="6"对应桌面端占一半 —— 这些值最终转成width="100%"或width="50%"的<td> <li>所有响应式逻辑靠媒体查询 + <code>display: none/block控制，但只对支持@media的客户端生效（Gmail Web 支持，Outlook 不支持） - 不写
<table> 手动嵌套，是因为 Inky 已固化了兼容性最佳实践，比如强制 <code>mso-line-height-rule: exactly修复 Outlook 行高<spacer></spacer>替代margin和padding邮件里最常踩的坑：用
@@######@@style="margin-bottom: 20px"分隔段落 → Outlook 忽略，Gmail 渲染异常。正确做法是用 Foundation 提供的<spacer></spacer>组件：它会被编译成一个空的
<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>里加文字或样式 —— 它只负责撑开空白，加了反而破坏结构 - 连续多个
<spacer></spacer>会导致不可预测的垂直压缩，优先用单个大尺寸代替多个小尺寸
Gulp 构建流程不可跳过
你写的 Inky 模板（.html）本身不能直接发邮件。必须运行
npx grunt build或gulp build，触发以下关键步骤：- 将 SCSS 编译为内联友好的 CSS（避免
calc()、var()等不兼容语法） - 用
inline-css插件把样式逐个注入到<table>、<code><td> 等标签的 <code>style属性中 - 把
<spacer></spacer>、<button></button>等 Inky 标签转成真实 HTML 表格结构 - 自动添加
<meta name="format-detection" content="telephone=no">等 iOS 专用修复
跳过这步直接发源码 .html → 所有样式失效，Inky 标签原样暴露，客户端当垃圾丢弃。
真正难的不是写代码，而是接受邮件开发本质是“逆向工程”：你不是在写网页，是在给一堆 20 年前的渲染引擎喂它们能咽下的东西。Foundation 的价值不在语法多简洁，而在它把所有已知坑都预填好了——只要老老实实用它的管道，别绕开 Gulp、别硬塞现代 CSS、别手写表格，就能稳住 90% 的客户端表现。
<container><row><columns small="12" large="6">左栏</columns><columns small="12" large="6">右栏</columns></row></container>
<p>标题文本</p> <spacer size="24"></spacer><p>正文内容</p>
-
-
