使用 Sass

兼容性

Foundation 针对电子邮件可以使用 Ruby Sass 和 libsass 进行编译。我们希望尽可能使用这两个编译器的最新版本。我们的文档和 ZURB 电子邮件堆栈均使用 node-sass（libsass 的 Node 端口）进行编译。我们推荐以下版本的编译器

• Ruby Sass 3.4+
• node-sass 3.4.2+ (libsass 3.3.2)

加载框架

如果你正在使用 ZURB 电子邮件堆栈 来创建电子邮件，那么 Sass 已为你设置完毕。但是，将 Foundation 针对电子邮件 Sass 融入你自己的电子邮件工作流也很容易。

首先，使用 Bower 或 npm 安装框架文件。

npm install foundation-emails --save

接下来，在 Sass 中添加框架文件作为导入路径。具体操作方式取决于你的构建过程，但路径是一样的：[packages_folder]/foundation-emails/scss

以下为使用 grunt-contrib-sass 的示例

grunt.initConfig({
  sass: {
    dist: {
    options: {
        loadPath: ['node_modules/foundation-emails/scss']
      }
    }
  }
});

如果你正在使用 Compass，请打开你的项目的 config.rb，并向其中添加导入路径

add_import_path "node_modules/foundation-emails/scss"

最后，向你的主 Sass 文件的顶部添加一个 @import 语句。

@import 'foundation-emails';

你还会需要一个用于项目的设置文件，它会允许你修改 Foundation 针对电子邮件的默认样式。在此处下载最新的设置文件，将其作为 _settings.scss 添加到你的项目中，然后先导入它，然后再导入 Foundation 本身。

@import 'settings';
@import 'foundation-emails';

设置文件

所有 Foundation 项目都包含一个名为 _settings.scss 的设置文件。如果你正在使用 ZURB 堆栈，你可以在 src/assets/scss/ 下找到设置文件。如果你正在使用 Bower 或 npm 单独安装框架，则在那些软件包中包含一个设置文件，你可以将其复制到自己的 Sass 文件夹中使用。

每个组件都包含一组用于修改核心结构或视觉样式的变量。如果你无法使用变量自定义内容，那么你可以只编写自己的 CSS 以将其添加进去。

以下是一组示例设置变量。这些变量更改了 按钮 的默认样式

// Text color of buttons.
$button-color: $white;

// Text color of buttons with a light background.
$button-color-alt: $medium-gray;

// Font weight of buttons.
$button-font-weight: bold;

// Background color of buttons.
$button-background: $primary-color;

// Border around buttons.
$button-border: 2px solid $button-background;

我们整理了一些Sass 文件结构方面的最佳实践，这将帮助你保持项目的简洁。