基礎 - Sass

SASS 有助於使 Foundation 中的程式碼更靈活和可定製。

相容性

要安裝基於 SASS 的 Foundation 版本，需要在 Windows 上安裝 Ruby。Foundation 可以使用 Ruby SASS 和 libsass 編譯。我們推薦使用node-sass 3.4.2+ 版本編譯 SASS。

需要 Autoprefixer

Autoprefixer 處理 SASS 檔案。gulp-autoprefixer 用於構建流程。以下 Autoprefixer 設定用於獲得適當的瀏覽器支援。

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

載入框架

我們可以使用 NPM 安裝框架檔案。使用命令列介面 (CLI)，我們可以編譯 Sass 檔案。以下是載入框架的命令：

npm install foundation-sites --save

執行上述命令列程式碼後，您將獲得以下行：

手動編譯

框架檔案可以根據您的構建過程新增為匯入路徑，但路徑將保持不變packages_folder/foundation-sites/scss。@import 語句包含在foundation-sites.scss 檔案的頂部。給定程式碼中的下一行在調整 CSS 輸出部分進行了解釋。

@import 'foundation';
@include foundation-everything;

使用編譯後的 CSS

您可以包含預編譯的 CSS 檔案。有兩種型別的 CSS 檔案，即壓縮版和未壓縮版。壓縮版用於生產環境，未壓縮版用於直接編輯框架 CSS。

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

調整 CSS 輸出

對於各種元件，Foundation 輸出包含許多類。它用於控制框架的 CSS 輸出。新增以下單行程式碼以一次包含所有元件。

@include foundation-everything;

以下是當您在 scss 檔案中編寫上述程式碼時匯入的元件列表。不需要的元件可以註釋掉。您可以在Your_folder_name/node_modules/foundation-sites/scss/foundation.scss 檔案中檢視以下程式碼行。

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

設定檔案

整個 Foundation 專案中包含一個設定檔案，即_settings.scss。如果您使用 Yeti Launch 或 CLI 建立 Foundation for Sites 專案，則可以在 src/assets/scss/ 下找到設定檔案。

我們已使用 npm 安裝了 Foundation，因此您可以在your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss 下找到包含的設定檔案。您可以將其移動到您自己的 Sass 檔案中以進行使用。

如果您無法使用變數進行自定義，則可以編寫您自己的 CSS。以下是一組變數，它們更改按鈕的預設樣式。

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;