重大變更：顏色函式
某些顏色函式在設計時假設所有顏色都彼此相容，但現在 Sass 支援 CSS Color 4 的所有色彩空間，這個假設已不再適用。
過去，所有 Sass 顏色值都涵蓋相同的色域：無論顏色定義為 RGB、HSL 或 HWB，它們都只涵蓋sRGB 色域，並且只能表示自 1990 年代中期以來螢幕可以顯示的顏色。Sass 加入其原始顏色函式集時，假設所有顏色都可以在這些表示法之間自由轉換，並且每個通道名稱（例如「紅色」或「色相」）都具有單一明確的含義。
CSS Color 4 的發布改變了這一切。它增加了對許多具有比 sRGB 更廣色域的新色彩空間的支援。為了支援這些顏色，Sass 必須重新思考顏色函式的運作方式。除了新增 color.channel() 和 color.to-space() 等新函式之外，許多基於不再成立的假設的舊函式也已被棄用。
舊的通道函式舊的通道函式永久連結
現在，顏色空間中的通道名稱變得模稜兩可。舊有的 RGB 空間有一個 red 通道，但 display-p3、rec2020 和許多其他顏色空間也都有。這表示 color.red()、color.green()、color.blue()、color.hue()、color.saturation()、color.lightness()、color.whiteness()、color.blackness()、color.alpha() 和 color.opacity() 將被移除。您可以改用 color.channel() 函數來取得特定通道的值，通常會搭配明確的 $space 參數來指定您正在使用的顏色空間。
測試場SCSS 語法
@use "sass:color";
$color: #c71585;
@debug color.channel($color, "red", $space: rgb);
@debug color.channel($color, "red", $space: display-p3);
@debug color.channel($color, "hue", $space: oklch);
Sass 語法
@use "sass:color"
$color: #c71585
@debug color.channel($color, "red", $space: rgb)
@debug color.channel($color, "red", $space: display-p3)
@debug color.channel($color, "hue", $space: oklch)
單通道調整函數單通道調整函數 永久連結
這些函數與舊的通道函數一樣存在模稜兩可的問題，而且在加入 Color 4 支援之前就已經與 color.adjust() 函數功能重疊。不僅如此，通常使用 color.scale() 函數會更好，因為它更適合根據現有顏色進行相對調整，而不是絕對調整。這表示 adjust-hue()、saturate()、desaturate()、lighten()、darken()、opacify()、fade-in()、transparentize() 和 fade-out() 將被移除。請注意，這些函數從未有模組範圍的對應函數，因為它們的使用已經不建議。
測試場SCSS 語法
@use "sass:color";
$color: #c71585;
@debug color.adjust($color, $lightness: 15%, $space: hsl);
@debug color.adjust($color, $lightness: 15%, $space: oklch);
@debug color.scale($color, $lightness: 15%, $space: oklch);
Sass 語法
@use "sass:color"
$color: #c71585
@debug color.adjust($color, $lightness: 15%, $space: hsl)
@debug color.adjust($color, $lightness: 15%, $space: oklch)
@debug color.scale($color, $lightness: 15%, $space: oklch)
過渡期過渡期 永久連結
- Dart Sass
- 自 1.79.0 起
- LibSass
- ✗
- Ruby Sass
- ✗
首先，我們會針對所有使用預計移除的函數發出棄用警告。在 Dart Sass 2.0.0 中，這些函數將被完全移除。嘗試呼叫模組範圍的版本將會拋出錯誤，而全域函數將會被視為普通的 CSS 函數並以普通字串的形式輸出。
您可以使用 Sass 移轉工具 自動將已棄用的 API 移轉到新的替代方案。
我可以隱藏警告嗎？我可以隱藏警告嗎？ 永久連結
Sass 提供了一套強大的選項，用於管理您看到的棄用警告以及顯示時機。
簡潔模式和詳細模式簡潔模式和詳細模式 永久連結
預設情況下，Sass 以簡潔模式執行，它只會針對每種類型的棄用警告顯示五次，之後就會隱藏其他警告。這有助於確保使用者知道他們需要注意即將發生的重大變更，同時又不會產生大量的控制台訊息。
如果您以詳細模式執行 Sass，它會顯示遇到的每個棄用警告。這在追蹤修復棄用警告的剩餘工作時很有用。您可以使用命令列上的 --verbose 旗標 或 JavaScript API 中的 verbose 選項 來啟用詳細模式。
⚠️ 注意！
在透過 JS API 執行時，Sass 不會在編譯之間共用任何資訊，因此預設情況下，它會針對每個編譯的樣式表印出五個警告。然而，您可以透過撰寫（或請您最愛框架的 Sass 外掛程式作者撰寫）一個 自訂的 Logger 來解決這個問題，該 Logger 每個棄用警告只會印出五次錯誤，並且可以在多個編譯之間共用。
抑制 dependencies 中的棄用警告抑制 dependencies 中的棄用警告永久連結
有時，您的 dependencies 會有一些您無能為力的棄用警告。您可以使用命令列上的 --quiet-deps 旗標，或是在 JavaScript API 中使用 quietDeps 選項，來抑制來自 dependencies 的棄用警告，同時仍會印出應用程式本身的棄用警告。
就這個旗標而言，「dependency」是指任何不是從入口樣式表連續相對載入的樣式表。這意味著任何來自載入路徑的樣式表，以及大多數透過自訂匯入器載入的樣式表。
抑制特定的棄用警告抑制特定的棄用警告永久連結
如果您知道某個特定的棄用警告對您來說不是問題，您可以使用命令列上的 --silence-deprecation 旗標，或是在 JavaScript API 中使用 silenceDeprecations 選項，來抑制該特定棄用警告的警告訊息。