Foundation

Sass 入门

用 ZURB 电子邮件堆栈编写 HTML 电子邮件，开始使用 Sass。

Foundation for Emails 消除了开发 HTML 电子邮件的痛苦，让您可以直接使用一组功能强大且经过测试的组件。这包括完全自适应的网格、按钮、标注、菜单等等。

Foundation for Emails 的 Sass 工作流程由 ZURB 电子邮件堆栈 提供支持，这是一个用于创建 HTML 电子邮件的一体化构建系统。此工作流程需要更多前期设置，但工具支持飞速的编码，并通过我们 Inky 中新的自定义 HTML 标签让您的代码保持惊人的简洁。

ZURB 堆栈工作流程还包括 Handlebars，允许您将电子邮件作为模板而不是静态文件编写。最后，您可以使用 Sass 设置文件 轻松进行彻底的设计更改。以下是此模板中打包的所有内容

  • Inky HTML
  • Sass
  • Handlebars 模板
  • BrowserSync
  • 图像压缩
  • 内联

在此入门指南中，我们将下载 Foundation for Emails，构建基本网格，然后内联我们的电子邮件，使其准备好进行测试。

要求

要使用 Foundation for Emails 的 Sass 版本，您需要在计算机上安装 Node.js。Node 与 Windows、OS X 和 Linux 兼容— Node.js 网站 为每个操作系统提供了安装程序。

安装

我们将使用 Foundation CLI 设置新项目。如果您已安装Foundation for Sites 的 Foundation CLI，则可以跳过此第一个命令。

npm install --global foundation-cli

如果您在 OS X 或 Linux 上遇到任何权限错误 (EACCESS)，则可以尝试使用 sudo 设置命令前缀。

sudo npm install --global foundation-cli

一旦机器上安装了 CLI，启动空白的 Foundation for Emails 项目就非常容易。移动到用于存储项目的文件夹中，然后运行此命令

foundation new --framework emails

CLI 会要求您提供项目名称，该名称用作要安装的文件夹的名称。之后，将下载项目模板，并安装各种依赖项。整个过程需要一分钟以上。

运行服务器

安装项目后，运行 cd project，其中 project 是刚创建项目的名称。然后运行

npm start

这将开启构建过程，其中包括 HTML 解析、Sass、图像压缩和服务器。当初始构建完成后，您的浏览器将弹出指向您的项目的新选项卡。您将看到一个空白的 index.html 文件。

文件结构

您将在项目 src 文件夹中完成所有工作。src 中的各种 HTML 文件、Sass 文件和图像会被编译到名为 dist/（即“分发”）的新文件夹中，其中包含用于电子邮件的最终 HTML 和 CSS。您需要将这些文件上传至 Litmus、Campaign Monitor 等进行测试或将它们加载到您的电子邮件系列服务中。

下面简要介绍了 src 文件夹中的文件

  • assets/：Sass 和图像文件。
  • layouts/：包裹所有电子邮件的样板 HTML。
  • pages/：用于电子邮件的 HTML 文件。
  • partials/：可注入到页面中的可重复使用的 HTML 块。

样板

您可以在 src/layouts/default.html 中看到在 HTML 中使用所必需的样板。我们已在下面对该样板进行了注释，说明了其中各部分的作用。

<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <!-- The character set should be utf-8 -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- Enables media queries -->
  <meta name="viewport" content="width=device-width"/>
  <!-- Link to the email's CSS, which will be inlined into the email -->
  <link rel="stylesheet" href="assets/css/foundation-emails.css">
</head>

<body>
  <!-- Injection point for the inline <style> element. Don't remove this comment! -->
  <!-- <style> -->
  <!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <!-- The class, align, and <center> tag center the container -->
      <td class="float-center" align="center" valign="top">
        <center>
          <!-- The body of each email you write is injected here -->
          {{> body}}
        </center>
      </td>
    </tr>
  </table>
</body>
</html>

网格基础知识

用于电子邮件的 Foundation 包含制作 HTML 电子邮件所需的许多常见元素：网格、文本样式、按钮、标注等。

用于创建能在所有电子邮件客户端中使用的 HTML 电子邮件所需的标记复杂，并且涉及编写许多表格。但是，ZURB Stack 包括 Inky，这是一种将简单的 HTML 标记转换为组件所需的复杂 HTML 的模板语言。

我们来构建一个基本网格。

<container>
  <row>
    <columns small="12" large="6">Column One</columns>
    <columns small="12" large="6">Column Two</columns>
  </row>
</container>

我们在这里使用了三个关键布局元素：容器、行和栏。

**容器**将包裹您的电子邮件正文。它将最大的宽度应用于电子邮件正文。

**行**用于将成组的**栏**组合到一起。栏将您的布局分成了并排坐落的水平部分。在小屏幕上，这些栏会叠放在一起以节省空间，除非您将它们设置为在小屏幕上保留其布局。

在上面的示例中，我们在 <column> 标记上使用了属性 large 以在**大屏幕**上定义该列的大小。Foundation 使用一个 12 栏网格，并且由于 large="6"，这意味着每栏将占据该行一半的宽度。在小屏幕上，每栏都将是全宽的，第二栏将叠放在下面。

内联

现在我们已经有了基本的电子邮件，在发送该电子邮件之前，我们需要做的最后一件事是内联它。这是一个将电子邮件的所有 CSS 注入到 HTML 中的过程，这样它就可以作为一个独立文件工作。

诸如 Gmail 和 Outlook 等电子邮件客户端会从 <head> 中剥离 <style> 标记，Gmail 还会从电子邮件的 <body> 中剥离该标记。最好在您的标记中内联编写 CSS。在样式标记中手工内联编写所有 CSS 将会非常麻烦且耗时。

默认情况下，构建进程不会内联。要在构建时执行完整的内联进程，请退出在命令行中运行的进程，并改为运行 npm run build。这执行了相同的构建进程，但在结尾处增加了内联步骤。

您电子邮件的 CSS 将包含用于响应式样式的媒体查询，内联工具会将其移到 <body> 中，以便保留这些查询。

当电子邮件在浏览器中打开时，它的外观将保持一致。但是，请尝试查看页面的源代码，您将会看到如下混乱的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="background:#cacaca;min-height:100%"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">...

测试

现在您已经内联了电子邮件，需要在真正的电子邮件客户端中对其进行测试以验证它是否显示正确。Foundation 的所有内置组件早已在所有主流电子邮件客户端中得到测试，因此我们已经为您的工作节省了巨大的精力。但是，您需要在将电子邮件发送给大量人群之前对它进行测试。

用于测试电子邮件的最受欢迎的工具是 Litmus。您只需要粘贴电子邮件的 HTML，即可在您想要的任何电子邮件客户端中获取实时预览。

由您决定选择哪些电子邮件客户端来测试，但我们建议您 查看我们的兼容性列表。

后面的步骤

您已成功安装适用于电子邮件的 Foundation 框架，并撰写、内联了您的第一封电子邮件，并对其进行了测试！如需继续使用该框架，您可以查看其他框架组件的文档，包括 按钮、标注、菜单。

如果您有兴趣深入了解 Foundation 团队提供的框架，请查看我们关于 Foundation for Emails 的大师班，这是一个按需视频系列，探讨有关电子邮件设计工作流程的各个方面。

ZURB 大师班 响应式电子邮件

在此在线课程中，您将学习如何快速设计和开发响应式电子邮件，该电子邮件在几乎所有的屏幕、浏览器和电子邮件客户端（甚至 Outlook）中都美观地显示。

了解适用于电子邮件的 Foundation 框架

适用于电子邮件的 Foundation 框架

适用于电子邮件的 Foundation 框架是 ZURB（一家位于加利福尼亚州坎贝尔市的产品设计公司）创建的响应式 HTML 电子邮件框架。自 1998 年开始构建网络产品和服务后，形成了此框架。

还想了解其他内容吗？

与我们交谈

在以下位置发推文给我们
@ZURBfoundation

加入
我们的精彩社区。

持续更新

了解有关 Foundation 的最新信息。在 Github 上找到我们。

保持联系

© 1998‐2018 ZURB, Inc. 保留所有权利。