重大變更:顏色 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 色彩空間的一組色板名稱。只要這些色板沒有跨色彩空間混合(例如,同時更改 redhue),Sass 就可以判斷預期的色彩空間。

在 Color 4 中,色彩空間不再能僅從其色板名稱中明確區分。許多色彩空間都有 redgreenblue 色板,但範圍不同;許多色彩空間都有 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}) 總是指任何具有 redgreenblue 通道的顏色的原生紅色通道。

為了向後兼容,如果您正在更改傳統顏色的傳統通道,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 選項 來抑制該特定棄用警告。