重大變更:嚴格單元 運算子

Sass 過去允許以容易混淆作者意圖是二元運算子還是單元運算子的方式使用 -+。這種令人困惑的語法將被 棄用。

這個屬性是如何 編譯的?

程式碼遊樂場

SCSS 語法

$size: 10px;

div {
  margin: 15px -$size;
}
程式碼遊樂場

Sass 語法

$size: 10px

div
  margin: 15px -$size

有些使用者可能會說「- 附加在 $size 上,所以應該是 margin: 20px -10px」。其他人可能會說「- 位於 20px$size 之間,所以應該是 margin: 5px」。Sass 目前同意後者的觀點,但真正的問題是它一開始就令人困惑!這是 CSS 以空格分隔的列表語法與 Sass 算術 語法結合的自然但不幸的結果。

這就是為什麼我們要將其設為錯誤。未來,如果您想使用二元 -+ 運算子(也就是減去或加上兩個數字的運算子),您需要在兩側都加上空格或兩側都不要 加空格。

  • 有效:15px - $size
  • 有效:(15px)-$size
  • 無效:15px -$size

如果您想在以空格分隔的列表中使用單元 -+ 運算子,您(仍然)需要將其用括號 括起來。

  • 有效:15px (-$size)

過渡期過渡期永久連結

相容性
Dart Sass
自 1.55.0 起
LibSass
Ruby Sass

我們將在 Dart Sass 2.0.0 中將此設為錯誤,但在那之前,它只會發出棄用警告。

💡 有趣小知識

請記住,您可以隱藏您無法控制的函式庫的棄用警告!如果您使用的是命令列介面,您可以傳遞 --quiet-deps 旗標(文件連結),如果您使用的是 JavaScript API,您可以將 quietDeps 選項(文件連結)設定為 true

自動遷移自動遷移永久連結

您可以使用Sass 遷移工具自動更新您的樣式表,在任何需要它的 -+ 運算符之後添加空格,這將保留這些樣式表的現有行為。

$ npm install -g sass-migrator
$ sass-migrator strict-unary **/*.scss

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

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

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

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

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

⚠️ 注意!

從 JS API(文件連結) 運行時,Sass 不會在編譯之間共享任何資訊,因此預設情況下,它會為*每個*編譯的樣式表列印五個警告。但是,您可以通過編寫(或要求您最喜歡的框架的 Sass 外掛程式的作者編寫)一個自訂的 Logger 來解決此問題,該記錄器每個棄用只列印五個錯誤,並且可以在多個編譯之間共享。

隱藏依賴項中的棄用警告隱藏依賴項中的棄用警告永久連結

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

就這個旗標而言,「依賴項」是指任何並非僅僅從入口點樣式表進行一系列相對載入的樣式表。這意味著任何來自載入路徑的東西,以及大多數通過自訂導入器載入的樣式表。

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

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