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 旗標監控個別檔案或目錄。監控旗標會告訴 Sass 監控你的原始檔案是否有變更,並在你儲存 Sass 時重新編譯 CSS。如果你想要監控(而不是手動建置)你的 input.scss 檔案,你只要將監控旗標新增到你的指令中,像 這樣

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 語法

$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 會讓您將 CSS 選擇器巢狀在與 HTML 相同的視覺層次結構中。請注意,過度巢狀的規則會導致過度限定的 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;
}


您會注意到 ullia 選擇器巢狀在 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 檔案中參照其變數、混合函式。使用檔案也會在編譯的 輸出中包含其產生的 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 很聰明,會為您找出 它。


混合混合永久連結

CSS 中有些東西寫起來有點繁瑣,特別是 CSS3 和許多現有的供應商前綴。混合讓您可以建立想要在整個網站中重複使用的 CSS 宣告群組。它有助於讓您的 Sass 非常DRY。您甚至可以傳入值,讓您的混合更具彈性。以下是 theme 的範例。

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 指令並為其命名。我們已將混合命名為 theme。我們也在括號內使用變數 $theme,以便我們可以傳入我們想要的任何 theme。建立混合後,您可以使用它作為 CSS 宣告,從 @include 開始,後面接著混合的名稱 


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

使用 @extend 讓您可以從一個選擇器分享一組 CSS 屬性到另一個選擇器。在我們的範例中,我們將使用另一個與延伸齊頭並進的功能,即佔位符類別,建立一系列簡單的錯誤、警告和成功訊息。佔位符類別是一種特殊類型的類別,它僅在延伸時列印,而且可以協助保持您編譯的 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()%。在我們的範例中,我們將進行一些簡單的數學運算,以計算 articleaside 的寬度。

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 中的運算讓我們可以執行一些操作,例如將像素值轉換為百分比,而無需太多 麻煩。