我刚刚开始使用Zurb Foundation(SASS)来创建响应式电子邮件。我按照本教程创建了一个测试电子邮件。如教程所示，在浏览器中查看测试电子邮件时，它是响应式的并且看起来很漂亮。
我用于测试电子邮件的标准样板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<!-- <style> -->
</head>
<body>
<span class="preheader">{{description}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{{> body}}
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
测试电子邮件的正文：
---
layout: index-layout
subject: My Email Templates
---
<container>
<row class="gray collapse">
<columns>
<center><img src="http://unsplash.it/800/200"></center>
</columns>
</row>
<row class="gray">
<columns>
<h2 class="text-center">Responsive columns below</h2>
</columns>
</row>
<row class="gray">
<columns small="12" large="4">
<p>Column 1</p>
</columns small="12" large="4">
<columns>
<p>Column 2</p>
</columns small="12" large="4">
<columns>
<p>Column 3</p>
</columns>
</row>
</container>
以下是从Chrome中的"查看源代码"中获取的结果源的外观：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>My Email Templates</title>
<!-- <style> -->
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.23.6'></script>".replace("HOST", location.hostname));
//]]></script>
<span class="preheader"></span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center data-parsed="">
<table align="center" class="container float-center"><tbody><tr><td>
<table class="row gray collapse"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<center data-parsed=""><img src="http://unsplash.it/800/200" align="center" class="float-center"></center>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<h2 class="text-center">Responsive columns below</h2>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-4 columns first"><table><tr><th>
<p>Column 1</p>
</th></tr></table></th>
<th class="small-12 large-4 columns"><table><tr><th>
<p>Column 2</p>
</th></tr></table></th>
<th class="small-12 large-4 columns last"><table><tr><th>
<p>Column 3</p>
</th></tr></table></th>
</tr></tbody></table>
</td></tr></tbody></table>
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
我使用gmail将测试电子邮件发送给自己进行检查。这是通过复制上面显示的源代码并使用"插入 HTML"通过 chrome 中 gmail 的 html 扩展名粘贴它来完成的。结果很可怕 - 没有响应能力，看起来很丑。
我应该如何使用我创建的测试电子邮件？我是否应该通过电子邮件发送来自Chrome中"查看源代码"的来源？甚至可以通过gmail发送测试电子邮件，还是必须使用例如mailchimp或sendgrid？
Putsmail 将是快速测试此类单个模板的最佳选择。您只需粘贴符合的HTML并添加您的Gmail地址(或任何其他地址)
Zurb Foundation for Email 2.0 的 SASS 版本使用终端模拟器进行控制。我假设您已经使用了一个安装了 Zurb。您缺少的是一些命令。
首先，您使用终端导航到安装 Zurb 的目录。该命令是npm start或foundation watch。这将启动 Zurb 在运行命令以内联代码之前查看编辑的模式。
若要内联代码，请键入foundation build或npm run build。这将为您提供一封电子邮件，其中包含必要的内联 css 代码，需要生成最终电子邮件。
祖尔布命令
您可能会发现有用的其他一些 Zurb 命令是：
npm install --global foundation-cli-(安装 npm)foundation new --framework emails-(Zurb的新装置)npm start-(启动应用程序)foundation watch-(启动应用程序)foundation build-(为相应的 CSS 运行内联)npm run build-(为相应的 CSS 运行内联)npm cache clean-(清除缓存)npm update-(安装最新更新)
如果这些都没有意义，请访问以下之一以获取更好的教程，希望能让您快速了解 Zurb 的工作原理。这很复杂，但它是很棒的电子邮件。
更多信息
- https://foundation.zurb.com/emails/docs/sass-guide.html
- https://foundation.zurb.com/emails/docs/css-guide.html
祝你好运。