我刚开始使用Zurb Foundation（SASS）创建响应式电子邮件。我按照this tutorial创建了测试电子邮件。如教程所示，在浏览器中查看测试电子邮件时，它具有响应性并且看起来很漂亮。
我用于测试电子邮件的标准锅炉板：
<!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>
这就是从＆＃34;查看源＆＃34;中得到的结果。在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将测试邮件发送给自己进行检查。这是通过复制上面显示的源并使用＆＃34;插入HTML＆＃34;来粘贴它来完成的。通过Chrome中的gmail html扩展名。结果很可怕 - 没有反应，看起来很难看。
我应该如何使用我创建的测试电子邮件？它甚至来自＆＃34;查看来源＆＃34;在Chrome中，我应该通过电子邮件发送？甚至可以通过gmail发送测试邮件，还是必须使用例如mailchimp或sendgrid？
答案 0 :(得分：0)
Putsmail将是您快速测试此类单个模板的最佳选择。您只需粘贴已编译的HTML并添加您的Gmail地址（或任何其他地址）
即可答案 1 :(得分：0)
Zurb Foundation for Email 2.0的SASS版本使用终端模拟器进行控制。我假设您已经使用一个安装了Zurb。你缺少的是一些命令。
首先，您使用终端导航到您安装Zurb的目录。该命令为npm start或foundation watch。这将启动Zurb以一种模式运行，您可以在运行命令内联代码之前查看编辑。
要内嵌代码，请键入foundation build或npm run build。这将为您提供一封电子邮件，其中包含生成最终电子邮件所需的内联必要css代码。
Zurb命令
您可能会发现其他一些有用的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的工作原理。这很复杂，但它会发送很棒的电子邮件。
更多信息
祝你好运。