重大變更:嚴格的函式 單位
各種內建函式將會對其允許的單位更加嚴格,並將更一致地處理這些單位。這使得 Sass 更相容於 CSS 規範,並有助於更快地發現錯誤。
色相色相永久連結
- Dart Sass
- 自 1.32.0 版起
- LibSass
- ✗
- Ruby Sass
- ✗
在指定顏色的色相時,CSS 允許任何角度單位(deg、grad、rad 或 turn)。它也允許無單位的數字,這會被解釋為 deg。過去,Sass 允許*任何*單位,並將其解釋為 deg。這尤其容易造成問題,因為這表示 Sass 會允許有效的 CSS 表達式 hsl(0.5turn, 100%, 50%),但卻會完全錯誤地解釋它。
為了修復此問題並使 Sass 與 CSS 規範一致,我們將分多個階段進行變更
階段 1階段 1 永久連結
- Dart Sass
- 自 1.32.0 版起
- LibSass
- ✗
- Ruby Sass
- ✗
首先,如果您將帶有 deg 以外單位的數字作為色相傳遞給任何函式,Sass 只會發出棄用警告。仍然允許傳遞無單位的數字。
階段 2階段 2 永久連結
- Dart Sass
- 自 1.52.1 版起
- LibSass
- ✗
- Ruby Sass
- ✗
接下來,我們更改了色相參數的角度單位處理方式,以符合 CSS 規範。這表示帶有 grad、rad 或 turn 單位的數字將會轉換為 deg:0.5turn 將會轉換為 180deg,100grad 將會轉換為 90deg,依此類推。
由於此變更對於維持 CSS 相容性是必要的,根據Dart Sass 相容性策略,此變更只會提升次要版本號。然而,它盡可能減少行為的改變,以確保 Sass 根據 CSS 規範來詮釋所有有效的 CSS。
階段 3階段 3 永久連結
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
最後,在 Dart Sass 2.0.0 中,如果顏色函式傳入的色相參數帶有非角度單位,則會拋出錯誤。不帶單位的色相仍然允許。
飽和度和亮度飽和度和亮度永久連結
在指定 HSL 顏色的飽和度和亮度時,CSS 只允許使用 % 單位。即使是不帶單位的數字也是不允許的(不像色相)。過去,Sass 允許使用*任何*單位,並將其解釋為 %。您甚至可以寫 hsl(0, 100px, 50s),Sass 也會返回顏色 red(紅色)。
為了修復此問題並使 Sass 與 CSS 規範一致,我們將分兩個階段進行變更
階段 1階段 1 永久連結
- Dart Sass
- 自 1.32.0 版起
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果您將不帶單位或單位不是 % 的數字作為亮度或飽和度傳遞給任何函式,Sass 只會發出棄用警告。
階段 2階段 2 永久連結
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 中,如果顏色函式傳入的飽和度或亮度參數不帶單位或使用非 % 單位,則會拋出錯誤。
Alpha 值Alpha 值永久連結
在指定顏色的 Alpha 值時,CSS(根據色彩等級 4)允許使用 0 到 1 之間的不帶單位的值或 0% 到 100% 之間的 % 值。在大多數情況下,Sass 遵循此行為,但函式 color.adjust() 和 color.change() 過去允許使用*任何*單位,並將其解釋為不帶單位的數字。您甚至可以寫 color.change(red, $alpha: 1%),Sass 也會返回不透明的顏色 red(紅色)。
為了修復此問題並使 Sass 與 CSS 規範一致,我們將分三個階段進行變更
階段 1階段 1 永久連結
- Dart Sass
- 自 1.56.0 起
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果您將帶有任何單位(包括 %)的數字作為 Alpha 值傳遞給 color.change() 或 color.adjust(),Sass 只會發出棄用警告。
階段 2階段 2 永久連結
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
接下來,我們將更改 color.change() 和 color.adjust() 的 Alpha 參數處理 % 單位的方式。帶有 % 單位的 Alpha 值將除以 100%,將其轉換為 0 到 1 之間的不帶單位數字。
由於此變更是一個錯誤修復,可以提高與其他 Sass 函式的一致性,因此只會提升次要版本號。它將在階段 1 發布後至少三個月後更改,以便讓使用者有時間調整他們的程式碼並避免該錯誤。
階段 3階段 3 永久連結
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
最後,在 Dart Sass 2.0.0 中,如果 color.change() 和 color.adjust() 傳入的 Alpha 參數帶有非 % 單位,則會拋出錯誤。不帶單位的 Alpha 值仍然允許。
math.random()math.random() 永久連結
math.random() 函數過去會忽略 $limit 中的單位,並返回無單位的數值。例如,math.random(100px) 會捨棄「px」並返回像 42 這樣的數值。
Sass 未來版本將不再忽略 $limit 參數的單位,並返回具有相同單位的隨機整數。
階段 1階段 1 永久連結
- Dart Sass
- 自 1.54.5 版本起
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果您將帶有單位的 $limit 傳遞給 math.random(),Sass 會發出棄用警告。
階段 2階段 2 永久連結
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 中,傳遞帶有單位的 $limit 數字將會導致錯誤。
階段 3階段 3 永久連結
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 之後的次要版本中,將允許再次將帶有單位的 $limit 數字傳遞給 math.random() 函數。它將返回與 $limit 相同單位的隨機整數,而不是無單位的數字。
權重權重永久連結
color.mix() 函數 和 color.invert() 函數 過去都會忽略其 $weight 參數中的單位,儘管該參數在概念上代表百分比。Sass 未來版本將需要 % 單位。
階段 1階段 1 永久連結
- Dart Sass
- 自 1.56.0 起
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果您將沒有單位或單位不是 % 的 $weight 傳遞給 color.mix() 或 color.invert(),Sass 會發出棄用警告。
階段 2階段 2 永久連結
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 中,如果傳遞給 color.mix() 和 color.invert() 的 $weight 沒有單位或單位不是 %,則會引發錯誤。
索引索引永久連結
list.nth() 函數 和 list.set-nth() 函數 過去都會忽略其 $n 參數中的單位。Sass 未來版本將禁止任何單位。
階段 1階段 1 永久連結
- Dart Sass
- 自 1.56.0 起
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果您將沒有單位或單位不是 % 的 $weight 傳遞給 color.mix() 或 color.invert(),Sass 會發出棄用警告。
階段 2階段 2 永久連結
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 中,如果傳遞給 list.nth() 和 list.set-nth() 的索引 $n 帶有單位,則會引發錯誤。
我可以隱藏警告嗎?我可以隱藏警告嗎?永久連結
Sass 提供了一套強大的選項,用於管理您看到的棄用警告以及何時看到它們。
簡潔模式和詳細模式簡潔模式和詳細模式永久連結
預設情況下,Sass 以簡潔模式運行,它只會列印每種類型的棄用警告五次,之後就會隱藏其他警告。這有助於確保使用者知道他們需要注意即將發生的重大變更,而不會產生大量的控制台訊息。
如果您以詳細模式運行 Sass,它將列印遇到的*每個*棄用警告。這對於追蹤修復棄用時剩餘的工作很有用。您可以使用命令列上的 --verbose 旗標 或 JavaScript API 中的 verbose 選項 來啟用詳細模式。
⚠️ 注意!
當您透過 JS API 執行 Sass 時,Sass 不會在編譯過程中共用任何資訊,因此預設情況下,它會針對*每個*編譯的樣式表印出五個警告。然而,您可以透過編寫(或請求您最愛框架的 Sass 外掛程式作者編寫)一個 自訂的 Logger 來解決此問題,該 Logger 每個棄用警告只會印出五次錯誤,並且可以在多個編譯之間共用。
在 dependencies 中抑制棄用警告在 dependencies 中抑制棄用警告的永久連結
有時,您的 dependencies 會有一些您無能為力的棄用警告。您可以使用命令列上的 --quiet-deps 旗標 或 JavaScript API 中的 quietDeps 選項 來抑制 dependencies 的棄用警告,同時仍為您的應用程式印出警告。
就這個旗標而言,「dependency」是指任何並非僅從入口點樣式表進行一系列相對載入的樣式表。這意味著任何來自載入路徑的內容,以及大多數透過自訂匯入器載入的樣式表。
抑制特定棄用警告抑制特定棄用警告的永久連結
如果您知道某個特定棄用警告對您來說不是問題,您可以使用命令列上的 --silence-deprecation 旗標 或 JavaScript API 中的 silenceDeprecations 選項 來抑制該特定棄用警告的警告。