如何解决电子邮件中 ​​CSS 和 HTML 的难题

我最近尝试使用Glitch创建高性能电子邮件工作流程来编码、编译和预览我们的 HTML 营销电子邮件。

能够在一个地方完成所有这些工作对我来说非常有用，因此我创建了一个指南来指导您如何做同样的事情。

这篇文章是写给谁的？

如果你会发邮件，这篇文章很适合你。
也许你发邮件是工作的一部分，或者只是兼职，甚至只是为了好玩。你可能用过 Mailchimp、TinyLetter、Customer.io 或其他数以百万计的服务。

如果您发现自己使用原始 HTML 而不是拖放构建器来编写电子邮件，那么这篇文章绝对适合您。

如果您喜欢高级样式表，这绝对适合您。

问题出在电子邮件上

或者更准确地说，是电子邮件客户端。瞧，它们对电子邮件渲染的要求都大相径庭。

一些 Outlook 客户端（我知道）甚至使用旧的 Microsoft Word 引擎来呈现他们的电子邮件（我知道）。

有些客户端不完全尊重样式表，而有些客户端不尊重样式表的某些部分。这是一个整体问题。

因此，在我们这个有趣的世界里，最好的做法是内联尽可能多的样式。

使用内联样式自定义电子邮件是一项艰苦的工作，尤其是当您必须一次又一次地执行此操作时。

这真是令人沮丧，以至于出现了许多新工具来帮你解决这个问题。比如 Automattic 的Juice或 Litmus 的付费电子邮件生成器。都很棒！

但有些不是免费的，有些只能解决难题的一部分。

解决方案是任务运行器

任务运行器（如Grunt）将许多不同的任务组合成一个执行步骤。

我对 JavaScript 了解甚少，但我知道如何遵循 README 并进行修改，直到我破坏某些东西并使其再次运行。

所以，当我遇到 Grunt 并最终理解它时，它彻底震撼了我的电子邮件小世界。尤其是当我发现Lee Munroe 的 grunt-email-workflow时。我可以使用 SCSS（高级 CSS）并同时将其内联，这样在编写代码时模板就能保持简洁，同时输出我需要的一切。

一旦我启动并运行它（并进行自定义），得益于 Glitch 的预览功能的神奇，我可以立即看到实时预览。

这个任务运行器做什么？

使用一些基本模块，我创建了一个 Glitch 应用程序，它可以完成以下几项主要任务：

• 采用 SCSS/Sass 部分并将它们组合成统一的样式表
• 获取样式表并将所有样式内联到单个 HTML 文件中
• 将该 HTML 加载到预览文件中，您可以将其直接复制/粘贴到您的电子邮件客户端中。

我如何使用它？

1. 前往 Glitch.com 🎏 并创建一个帐户（如果您还没有）。
2. 前往grunt-for-email项目，点击 remix，制作你自己的版本。你需要更新一些小细节，比如修复一些链接/public/index.html。
3. 如果您希望代码仅供您使用，请将其设为私人项目。
4. 按照自述文件自定义您的文件夹和工作流程。
5. 开始运行您自己的任务。
6. 点击“显示”>“在代码旁边显示”即可获得一些精彩的预览。
7. 为了获得更多乐趣，请查看 README 中的其他资源。

如果您有任何疑问或反馈，请随时发表评论！如果您觉得此工具有用，请为这篇文章点赞。

我们即将在 Glitch 上推出一些激动人心的新功能。抢先了解。