Sass

Foundation 使用 Sass 撰寫，這讓我們可以自訂和彈性調整程式碼庫。

不熟悉 Sass 嗎？sass-lang.com 上的 [官方教學課程](https://sass.dev.org.tw/guide) 是個很好的起點。

相容性

Foundation for Sites 可使用 Ruby Sass 和 libsass 編譯。我們傾向於在可能的情況下堅持使用這兩個編譯器的最新版本。我們的文件和入門專案使用 node-sass 編譯，這是 libsass 的 Node 埠。我們建議使用這些版本的編譯器

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

需要 Autoprefixer

我們沒有在 Sass 檔案中包含供應商前綴，而是讓 Autoprefixer 為我們處理。我們的建置流程使用 gulp-autoprefixer，但還有其他版本可與 Grunt、Rails、Brunch 等搭配使用。

若要獲得適當的瀏覽器支援，請使用這些 Autoprefixer 設定

autoprefixer({
  browsers: ['last 2 versions', 'ie >= 9', 'android >= 4.4', 'ios >= 7']
});

載入架構

如果您使用 CLI 來建立專案，則 Sass 編譯流程已為您設定好。如果不是，您可以自行編譯我們的 Sass 檔案，或放入預先建置的 CSS 檔案。

首先，使用您最愛的套件管理員（例如 npm 或 yarn）安裝架構檔案。

npm install foundation-sites --save

手動編譯

接下來，將架構檔案新增為匯入路徑。執行此操作的方式取決於您的建置流程，但路徑不變：packages_folder/foundation-sites/scss

以下是一個使用 grunt-contrib-sass 的範例

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

如果您使用 Compass，請開啟專案的 config.rb 並在那裡新增匯入路徑

add_import_path "node_modules/foundation-sites/scss"

最後，在主要 Sass 檔案的最上方新增 @import 陳述式。請參閱下方的調整 CSS 輸出以瞭解如何控制架構的 CSS 輸出。

@import 'foundation';

您還需要一個設定檔，讓您修改 Foundation 的預設樣式。在此處下載最新的設定檔，將其新增到您的專案中，檔名為 _settings.scss，然後在 Foundation 本身之前匯入它。

設定檔需要從 Foundation 匯入 `util/util`。請確保 Sass 中包含 Foundation 資料夾，或變更 `@import util/util`，使其指向檔案的完整路徑。例如，NPM 使用者可能需要將匯入變更為 `node_modules/foundation-sites/scss/util/util`。

@import 'settings';
@import 'foundation';

使用編譯的 CSS

Foundation for Sites npm 套件包含預編譯的 CSS 檔案，有縮小（壓縮）和未縮小版本。如果您有興趣直接編輯架構 CSS，請使用未縮小檔案。對於製作，請使用縮小版本。

<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation-sites.css">

<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation-sites.min.css">

調整 CSS 輸出

Foundation 會為其各種元件輸出許多類別。這些類別有助於開發人員快速上手。但是，當您轉移到製作時，您可能希望以語意方式建置您的網格，用您自己的類別取代我們的預建類別，或完全移除元件。

每個元件都有 匯出混合，用於列印該元件的 CSS。如果您很滿意所有內容，您只需要一行程式碼

@include foundation-everything;

我們的入門專案包含完整匯入清單，讓您輕鬆註解不需要的元件。下方也包含完整清單。

@import 'foundation';

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

設定檔

所有 Foundation 專案都包含一個名為 _settings.scss 的設定檔。如果您使用 CLI 建立 Foundation for Sites 專案，您可以在 scss/（基本範本）或 src/assets/scss/（ZURB 範本）中找到設定檔。如果您使用 npm 獨立安裝架構，此套件中包含一個設定檔，您可以將其移至自己的 Sass 檔案中使用。

每個元件都包含一組變數，用於修改核心結構或視覺樣式。如果您無法使用變數自訂某些內容，您可以撰寫自己的 CSS 來新增它。

設定新專案後，當新版本變更、新增或移除變數時，您的設定檔無法自動更新。請持續關注新的 Foundation 版本，以便在變更時得知。

以下是設定變數範例。這些變數會變更按鈕的預設樣式

// Default padding for button.
$button-padding: 0.85em 1em !default;

// Default margin for button.
$button-margin: 0 $global-padding $global-padding 0 !default;

// Default fill for button. Is either solid or hollow.
$button-fill: solid !default;

// Default background color for button.
$button-background: $primary-color !default;

// Default hover background color for button.
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;

// Default font color for button.
$button-font-color: #fff !default;

// Default alternative font color for button.
$button-font-color-alt: #000 !default;

// Default radius for button.
$button-radius: 0 !default;

// Default sizes for button.
$button-sizes: (
  tiny: 0.7,
  small: 0.8,
  medium: 1,
  large: 1.3,
) !default;

// Default font size for button.
$button-font-size: 0.9rem !default;

// Default opacity for a disabled button.
$button-opacity-disabled: 0.25 !default;