使用 Sass

相容性

Foundation for Emails 可以用 Ruby Sass 和 libsass 編譯。我們傾向於在可能的情況下採用這兩個編譯器的最新版本。我們的文件和 ZURB Email Stack 是用 node-sass 編譯的，這是 libsass 的 Node 移植版本。我們建議使用以下版本的編譯器

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

載入架構

如果你使用 ZURB Email Stack 來建立電子郵件，Sass 已經為你設定好了。不過，你也可以輕鬆地將 Foundation for Emails 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 for Emails 的預設樣式。在此下載最新的設定檔，將它新增到您的專案中，檔案名稱為 _settings.scss，然後在 Foundation 本身之前匯入它。

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

設定檔

所有 Foundation 專案都包含一個名為 _settings.scss 的設定檔。如果您使用 ZURB Stack，可以在 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 檔案結構最佳實務，有助於您保持專案的整潔。