重大變更：延伸複合選 擇器

LibSass 目前允許像 .message.info 這樣的複合選擇器被延伸，但它的延伸方式與 @extend 的預期運作方式不 符。

相容性
Dart Sass
✓
LibSass
✗
Ruby Sass
✗

當一個選擇器延伸另一個選擇器時，Sass 會將所有符合延伸器樣式的元素套用延伸的類別樣式。換句話說，如果您撰寫 .heads-up {@extend .info}，它的作用就像您在 HTML 中將 class="heads-up" 替換為 class="heads-up info"。

根據該邏輯，您會預期 .heads-up {@extend .message.info} 的作用就像將 class="heads-up" 替換為 class="heads-up info message"。但這不是目前在 LibSass 和 Ruby Sass 中的運作方式——它不是將 .heads-up 新增到每個具有 *.info 或 .message* 的選擇器，而是僅將其新增到同時具有 *.info.message* 的選擇器。

程式碼試驗場

SCSS 語法

// These should both be extended, but they won't be.
.message {
  border: 1px solid black;
}
.info {
  font-size: 1.5rem;
}

.heads-up {
  @extend .message.info;
}
程式碼試驗場

Sass 語法

// These should both be extended, but they won't be.
.message
  border: 1px solid black

.info
  font-size: 1.5rem


.heads-up
  @extend .message.info

為了修復此問題，避免更多混淆，並保持程式碼簡潔和高效，Dart Sass 不支援延伸複合選擇器，並且將在 LibSass 的未來版本中移除此功能。為了相容性，使用者應該改為分別延伸每個簡單選 擇器。

程式碼試驗場

SCSS 語法

.message {
  border: 1px solid black;
}
.info {
  font-size: 1.5rem;
}

.heads-up {
  @extend .message, .info;
}
程式碼試驗場

Sass 語法

.message
  border: 1px solid black

.info
  font-size: 1.5rem


.heads-up
  @extend .message, .info

CSS 輸出

.message, .heads-up {
  border: 1px solid black;
}

.info, .heads-up {
  font-size: 1.5rem;
}

⚠️ 注意！

由於 Sass 不了解 CSS 將套用樣式的 HTML 細節，任何 @extend 都可能需要產生額外的選擇器，而這些選擇器並不適用於您的 HTML。當您不再繼承複合選擇器時，尤其如此。

大多數情況下，這些額外的選擇器不會造成任何問題，只會在 gzip 壓縮後的 CSS 中增加幾個位元組。但某些樣式表可能更依賴舊的行為。在這種情況下，我們建議您將複合選擇器替換為佔位選擇器。

程式碼試驗場

SCSS 語法

// Instead of just `.message.info`.
%message-info, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}

.heads-up {
  // Instead of `.message.info`.
  @extend %message-info;
}
程式碼試驗場

Sass 語法

// Instead of just `.message.info`.
%message-info, .message.info
  border: 1px solid black
  font-size: 1.5rem


.heads-up
  // Instead of `.message.info`.
  @extend %message-info

CSS 輸出

.heads-up, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}