重大變更：無效的組合子

Sass 過去在選擇器中使用前置、後置和重複的組合子方面非常寬容。除了巢狀結構之外，這些組合子的使用方式已被棄用。

Sass 過去支援三種無效的組合子使用方式：

  • 前置組合子，例如 + .error {color: red}。

  • 後置組合子，例如 .error + {color: red}。

  • 重複的組合子，例如 div > > .error {color: red}。

這些都不是有效的 CSS，而且都會導致瀏覽器忽略相關的樣式規則。支援它們會大幅增加 Sass 實作的複雜性，並讓修復與 @extend 規則相關的各種錯誤變得特別困難。因此，我們決定移除對這些使用方式的支援。

有一個主要的例外：前置和後置組合子仍然可以用於巢狀結構。例如，以下用法仍然完全受到支援：

程式碼遊樂場

SCSS 語法

.sidebar > {
  .error {
    color: red;
  }
}
程式碼遊樂場

Sass 語法

.sidebar >
  .error
    color: red

CSS 輸出

.sidebar > .error {
  color: red;
}

只有在巢狀結構解析後，選擇器中仍然存在前置或後置組合子時，Sass 才會產生錯誤。另一方面，重複的組合子永遠會產生錯誤。

為了確保現有的樣式表（可能意外地）包含無效的組合子，我們將支援一個過渡期，直到 Dart Sass 的下一個主要版本發布。

過渡期過渡期永久連結

相容性
Dart Sass
自 1.54.0 起
LibSass
✗
Ruby Sass
✗

首先，我們會針對所有雙重組合器，以及在巢狀結構解析後仍存在於選擇器中的前置或後置組合器發出棄用警告。

💡 小知識

請記住，您可以隱藏您無法控制的函式庫所發出的棄用警告！如果您使用的是命令列介面，您可以傳遞 --quiet-deps 旗標，如果您使用的是 JavaScript API，您可以將 quietDeps 選項 設定為 true。

此外，我們會立即開始從編譯後的 CSS 中省略我們已知無效的 CSS 選擇器，但有一個例外：我們 *不會* 省略以 leading combinator 開頭的選擇器，因為它們可能會從巢狀的 @import 規則或 meta.load-css() mixin 中使用。然而，我們不鼓勵這種模式，並將在 Dart Sass 2.0.0 中移除對它的支援。

我可以隱藏警告嗎？我可以隱藏警告嗎？ 永久連結

Sass 提供了一套強大的選項，用於管理您看到的棄用警告以及何時看到它們。

簡潔模式和詳細模式簡潔模式和詳細模式 永久連結

預設情況下，Sass 以簡潔模式運行，它只會針對每種類型的棄用警告列印五次，之後就會隱藏其他警告。這有助於確保使用者知道他們需要注意即將發生的重大變更，而不會產生大量的控制台訊息干擾。

如果您以詳細模式運行 Sass，它將列印它遇到的 *每個* 棄用警告。這對於追蹤修復棄用警告時剩餘的工作很有用。您可以使用命令列上的 --verbose 旗標 或 JavaScript API 中的 verbose 選項 來啟用詳細模式。

⚠️ 注意！

從 JS API 運行時，Sass 不會在編譯之間共享任何資訊，因此預設情況下，它會針對 *每個* 編譯的樣式表列印五個警告。然而，您可以透過撰寫（或要求您最喜歡的框架 Sass 外觀套件的作者撰寫）一個 自訂的 Logger 來解決這個問題，該記錄器只針對每個棄用警告列印五個錯誤，並且可以在多個編譯之間共享。

隱藏 dependencies 中的棄用警告隱藏 dependencies 中的棄用警告 永久連結

有時，您的 dependencies 中有一些您無能為力的棄用警告。您可以使用命令列上的 --quiet-deps 旗標 或 JavaScript API 中的 quietDeps 選項 來隱藏 dependencies 中的棄用警告，同時仍然為您的應用程式列印它們。

就這個旗標而言，「dependency」是指任何並非僅由入口點樣式表一系列相對載入而來的樣式表。這表示任何來自載入路徑的內容，以及大多數透過自訂 importer 載入的樣式表。

隱藏特定棄用警告隱藏特定棄用警告 永久連結

如果您知道某個特定棄用警告對您來說不是問題，您可以使用命令列上的 --silence-deprecation 旗標 或 JavaScript API 中的 silenceDeprecations 選項 來隱藏該特定棄用警告的警告。