Sass 基礎

在使用 Sass 之前，您需要在您的專案中設定它。如果您只想在這裡瀏覽，請繼續，但我們建議您先安裝 Sass。如果您想學習如何設定所有內容，請前往這裡。

預處理預處理永久連結

單獨使用 CSS 可能很有趣，但樣式表變得越來越大、越來越複雜，也越來越難維護。這就是預處理器可以提供幫助的地方。Sass 擁有 CSS 尚不存在的功能，例如巢狀、混入、繼承和其他一些很棒的功能，可幫助您編寫健壯、可維護的 CSS。

一旦您開始使用 Sass，它會將您預處理的 Sass 檔案儲存為您可以在網站中使用的普通 CSS 檔案。

最直接的方法是在您的終端機中執行此操作。安裝 Sass 後，您可以使用 `sass` 命令將 Sass 編譯為 CSS。您需要告訴 Sass 要從哪個檔案建置，以及要將 CSS 輸出到哪裡。例如，在終端機中執行 `sass input.scss output.css` 會使用單個 Sass 檔案 `input.scss`，並將該檔案編譯為 `output.css`。

您也可以使用 `--watch` 旗標監控個別檔案或目錄。`watch` 旗標會告訴 Sass 監控您的原始檔是否有變更，並在每次儲存 Sass 時重新編譯 CSS。如果您想要監控（而不是手動建置）您的 `input.scss` 檔案，您只需將 `watch` 旗標添加到您的命令中，如下所示：

sass --watch input.scss output.css

您可以透過使用資料夾路徑作為輸入和輸出，並用冒號分隔它們來監控目錄並輸出到目錄。在此範例中：

sass --watch app/sass:public/stylesheets

Sass 將會監控 `app/sass` 資料夾中的所有檔案是否有變更，並將 CSS 編譯到 `public/stylesheets` 資料夾。

💡 小知識

Sass 有兩種語法！SCSS 語法（`.scss`）是最常用的。它是 CSS 的超集，這表示所有有效的 CSS 也是有效的 SCSS。縮排語法（`.sass`）比較不常見：它使用縮排而不是大括號來巢狀語句，並使用換行符而不是分號來分隔它們。我們所有的範例都提供兩種語法。

變數變數永久連結

您可以將變數視為一種儲存您要在整個樣式表中重複使用的資訊的方式。您可以儲存顏色、字型堆疊或您認為您想要重複使用的任何 CSS 值等內容。Sass 使用 `$` 符號來建立變數。以下是一個範例：

  SCSS

  Sass

  CSS

       線上練習場SCSS 語法$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

       線上練習場Sass 語法$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

CSS 輸出body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

當 Sass 經過處理後，它會採用我們為 `$font-stack` 和 `$primary-color` 定義的變數，並輸出包含我們的變數值的普通 CSS。在處理品牌顏色並在整個網站中保持一致時，這會非常有用。

巢狀巢狀永久連結

在編寫 HTML 時，您可能已經注意到它具有清晰的巢狀和視覺階層。另一方面，CSS 則沒有。

Sass 讓您可以用符合 HTML 視覺階層結構的方式來巢狀 CSS 選擇器。但請注意，過度巢狀的規則會導致過於限定的 CSS，這可能會難以維護，而且通常被認為是不好的做法。

考慮到這一點，以下是一個網站導覽列典型樣式的範例。

  SCSS

  Sass

  CSS

       線上練習場SCSS 語法nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

       線上練習場Sass 語法nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none


CSS 輸出nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

您會注意到 ul、li 和 a 選擇器都巢狀在 nav 選擇器內。這是組織 CSS 並使其更易讀的好方法。

部分檔案部分檔案永久連結

您可以建立包含少量 CSS 片段的部分 Sass 檔案，並將其包含在其他 Sass 檔案中。這是模組化 CSS 並使其更易於維護的好方法。部分檔案是一個名稱開頭帶有底線的 Sass 檔案。您可以將其命名為 _partial.scss 之類的名稱。底線讓 Sass 知道該檔案只是一個部分檔案，不應該產生為 CSS 檔案。Sass 部分檔案與 @use 規則一起使用。

模組模組永久連結

Dart Sass: 自 1.23.0 起
LibSass: ✗
Ruby Sass: ✗

目前只有 Dart Sass 支援 @use。其他實作的使用者必須改用 @import 規則。

您不必將所有 Sass 寫在單一檔案中。您可以使用 @use 規則，依您想要的方式將其分割。這個規則會將另一個 Sass 檔案載入為「模組」，這表示您可以使用基於檔案名稱的命名空間，在您的 Sass 檔案中參考它的變數、mixin 和函式。使用檔案也會將其產生的 CSS 包含在您編譯的輸出中！

  SCSS

  Sass

  CSS
SCSS 語法// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}
Sass 語法// _base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

// styles.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white

CSS 輸出body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

請注意，我們在 styles.scss 檔案中使用了 @use 'base';。當您使用檔案時，不需要包含檔案副檔名。Sass 很聰明，會自動幫您判斷。

MixinMixin 永久連結

CSS 中有些東西寫起來有點繁瑣，尤其是 CSS3 和許多現有的廠商前綴。Mixin 讓您可以建立要在整個網站中重複使用的 CSS 宣告群組。它有助於保持您的 Sass 非常 DRY（Don't Repeat Yourself，不要重複自己）。您甚至可以傳入值來使您的 mixin 更具彈性。以下是一個 theme 的範例。

  SCSS

  Sass

  CSS

       線上練習場SCSS 語法@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}



       線上練習場Sass 語法@mixin theme($theme: DarkGray)
  background: $theme
  box-shadow: 0 0 1px rgba($theme, .25)
  color: #fff

.info
  @include theme

.alert
  @include theme($theme: DarkRed)

.success
  @include theme($theme: DarkGreen)




CSS 輸出.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

要建立 mixin，您可以使用 @mixin 指令並為其命名。我們已將 mixin 命名為 theme。我們也在括號內使用了變數 $theme，以便我們可以傳入任何我們想要的 theme。建立 mixin 後，您可以將其用作 CSS 宣告，以 @include 開頭，後接 mixin 的名稱。

延伸/繼承延伸/繼承永久連結

使用 @extend 可讓您將一組 CSS 屬性從一個選擇器共用到另一個選擇器。在我們的範例中，我們將使用另一個與 extend 密切相關的功能，也就是佔位符類別，來建立一系列簡單的錯誤、警告和成功訊息。佔位符類別是一種特殊類型的類別，它只在被延伸時才會列印，並且可以幫助保持您編譯的 CSS 簡潔乾淨。

  SCSS

  Sass

  CSS

       線上練習場SCSS 語法/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

       線上練習場Sass 語法/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap

.message
  @extend %message-shared

.success
  @extend %message-shared
  border-color: green

.error
  @extend %message-shared
  border-color: red

.warning
  @extend %message-shared
  border-color: yellow






CSS 輸出/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

以上程式碼的作用是讓 .message、.success、.error 和 .warning 的行為與 %message-shared 完全相同。這表示在任何 %message-shared 出現的地方，.message、.success、.error 和 .warning 也會出現。神奇之處在於生成的 CSS 中，這些類別都會獲得與 %message-shared 相同的 CSS 屬性。這有助於避免在 HTML 元素上撰寫多個類別名稱。

除了 Sass 中的佔位符類別之外，您還可以擴展大多數簡單的 CSS 選擇器，但使用佔位符是確保您不會擴展樣式中其他位置巢狀的類別的最簡單方法，巢狀類別可能會導致 CSS 中出現非預期的選擇器。

請注意，%equal-heights 中的 CSS 並未生成，因為 %equal-heights 從未被擴展。

運算子運算子永久連結

在 CSS 中進行數學運算非常有用。Sass 有一些標準的數學運算子，例如 +、-、*、math.div() 和 %。在我們的範例中，我們將進行一些簡單的數學運算來計算 article 和 aside 的寬度。

  SCSS

  Sass

  CSS

       線上練習場SCSS 語法@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

       線上練習場Sass 語法@use "sass:math"

.container
  display: flex

article[role="main"]
  width: math.div(600px, 960px) * 100%

aside[role="complementary"]
  width: math.div(300px, 960px) * 100%
  margin-left: auto



CSS 輸出.container {
  display: flex;
}

article[role=main] {
  width: 62.5%;
}

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}

我們建立了一個非常簡單的流式網格，基於 960px。Sass 中的運算讓我們可以輕鬆地將像素值轉換為百分比。