如何在 Zurb Foundation for Emails 中更改全局宽度？答案

【问题标题】：How to change the global width in Zurb Foundation for Emails?如何在 Zurb Foundation for Emails 中更改全局宽度？
【发布时间】：2018-03-31 00:07:40
【问题描述】：

我需要在 Zurb Foundation for Emails 中将电子邮件的全局宽度从标准的 680 像素更改为自定义的 492 像素。

我无法在 settings.scss 中更改它，因为我只需要一封电子邮件就可以拥有这个特定的宽度。

table.container {492px} 无法正常工作。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： email sass width zurb-foundation

【解决方案1】：

1) 在/src/assets/settings.scss中新建一个类：

.tinyemail {
    $global-width: 492px;

    & table.container {
        background: #fefefe;
        width: 492px;
        margin: 0 auto;
        Margin: 0 auto;
        text-align: inherit;
    }
}

2) 然后在/src/layouts/ 中创建一个名为tinyemail.html 的新布局，并在body 标签中添加一个类：

<body class="tinyemail">

3) 然后为具有自定义宽度的电子邮件创建一个页面，并在文件顶部指定自定义布局，如下所示：

---
layout: tinyemail
---

这是来自https://foundation.zurb.com/forum/posts/52024-emails-with-different-width的答案

【讨论】：

【解决方案2】：

我一直将自定义样式放在 SCSS 目录中名为 _custom.scss 的新文件中。然后我在文件中用@import 'custom'; 更新了 app.scss。

我一直在创建新的类和 ID，而不是试图覆盖现有的。

这是我只在一次与你类似的情况下做过的事情。

希望这会有所帮助。

【讨论】：