重大變更:顏色 JS API
由於 Sass 現在支援 CSS Color 4 的所有色彩空間,JS 顏色 API 的某些方面(基於所有顏色都相互兼容的假設而設計)已不再適用。
就像隨著 CSS Color 4 支援的加入,Sass 的顏色函式的某些方面已被棄用一樣,用於操作顏色的 JS API 的某些部分也已被棄用。
color.change()
現在需要一個 space
參數來進行跨色彩空間的變更color.change() 現在需要一個 space 參數來進行跨色彩空間的變更 永久連結
先前,color.change()
方法 只接受來自 RGB、HSL 或 HWB 色彩空間的一組色板名稱。只要這些色板沒有跨色彩空間混合(例如,同時更改 red
和 hue
),Sass 就可以判斷預期的色彩空間。
在 Color 4 中,色彩空間不再能僅從其色板名稱中明確區分。許多色彩空間都有 red
、green
和 blue
色板,但範圍不同;許多色彩空間都有 hue
色板,但會產生非常不同的色輪。為了消除這種歧義,color.change()
現在接受一個 space
參數,該參數明確指定您要用於轉換的色彩空間名稱。
const color = new sass.SassColor({red: 0x66, green: 0x33, blue: 0x99});
color.change({hue: 270, space: "okclh"});
如果討論中的顏色不在傳統色彩空間中,或者您正在更改僅存在於非傳統色彩空間中的通道(例如色度),則必須指定色彩空間。如果您正在更改顏色自身空間中存在的通道,則它始終是可選的,因此 color.change({red: 0.8})
總是指任何具有 red
、green
和 blue
通道的顏色的原生紅色通道。
為了向後兼容,如果您正在更改傳統顏色的傳統通道,Sass 仍然會自動為您轉換顏色。但是,此行為已被棄用。為了安全起見,您應該 *始終* 傳遞 space
參數,除非您確定顏色已經在您想要更改其通道的色彩空間中。
null
通道值null 通道值 永久連結
CSS Color 4 的主要變化之一是「缺少」通道的新概念。例如,hsl(none 0% 40%)
缺少色相,在大多數情況下它被視為 0,但它不會影響顏色插值,因此具有此顏色的漸變在中間不會出現幻影紅色色相。在構造顏色時,Sass 將缺失值表示為值 null
。
在添加對 CSS Color 4 的支持之前,Sass JS API 的 TypeScript 類型禁止在所有相關位置使用 null
。但是,程式碼本身將 null
視為與 undefined
相同,我們不希望破壞任何依賴此行為的純 JavaScript 程式碼的兼容性。目前,在構造新的[傳統顏色]或為傳統顏色調用 color.change()
時,null
值將被視為 undefined
並發出棄用警告。在這兩種情況下,如果您明確傳遞 space
參數,您將選擇新行為,並且 null
將被視為缺失通道。
過渡期過渡期 永久連結
- Dart Sass
- 自 1.79.0 起
- LibSass
- ✗
- Ruby Sass
- ✗
首先,我們將針對所有預定要更改的這些 API 的使用發出棄用警告。在 Dart Sass 2.0.0 中,重大更改將完全生效,舊行為將不再像以前那樣運作。
我可以隱藏警告嗎?我可以隱藏警告嗎? 永久連結
Sass 提供了一套強大的選項,用於管理您看到的棄用警告以及何時看到它們。
簡潔模式和詳細模式簡潔模式和詳細模式 永久連結
默認情況下,Sass 以簡潔模式運行,它只會列印每種類型的棄用警告五次,然後才會隱藏其他警告。這有助於確保用戶知道何時需要注意即將發生的重大更改,而不會產生大量的控制台訊息。
如果您以詳細模式運行 Sass,它將列印它遇到的 *每個* 棄用警告。這對於追蹤修復棄用時剩餘的工作很有用。您可以使用 JavaScript API 中的 verbose
選項 來啟用詳細模式。
⚠️ 注意!
從 JS API 運行時,Sass 不會在編譯之間共享任何資訊,因此默認情況下,它會為 *每個* 編譯的樣式表列印五個警告。但是,您可以通過編寫(或要求您最喜歡的框架的 Sass 插件的作者編寫)一個 自定義 Logger
來解決此問題,該記錄器每個棄用只列印五個錯誤,並且可以在多個編譯之間共享。
抑制依存檔案中的棄用警告抑制依存檔案中的棄用警告 永久連結
有時,您的依存檔案會有一些您無法處理的棄用警告。您可以使用 JavaScript API 中的 quietDeps
選項,抑制來自依存檔案的棄用警告,同時仍顯示應用程式本身的棄用警告。
就這個旗標而言,「依存檔案」是指任何並非僅從入口點樣式表依序相對載入的樣式表。這表示任何來自載入路徑的樣式表,以及大多數透過自訂 匯入器載入的樣式表。
抑制特定棄用警告抑制特定棄用警告 永久連結
如果您知道某個特定的棄用警告對您來說不是問題,您可以使用 JavaScript API 中的 silenceDeprecations
選項 來抑制該特定棄用警告。