重大變更：斜線作為 除法運算子

Sass 目前在某些情況下將 / 視為除法運算，在其他情況下則視為分隔符號。這讓 Sass 使用者難以判斷任何給定 / 的含義，並且難以使用將 / 作為 分隔符號的新 CSS 功能。

相容性
Dart Sass
部分
LibSass
✗
Ruby Sass
✗

如今，Sass 使用複雜的啟發式方法來判斷 / 應該被視為除法還是分隔符號。即使如此，作為分隔符號，它也只會產生一個未加引號的字串，難以在 Sass 內部檢查。隨著越來越多的 CSS 功能，例如 CSS Grid 和 新的 rgb() 和 hsl() 語法，使用 / 作為分隔符號，這對 Sass 使用者來說變得越來越痛苦。

由於 Sass 是 CSS 的超集，我們透過將 / 重新定義為*僅*作為分隔符號來匹配 CSS 的語法。/ 將被視為一種新的列表分隔符號類型，類似於 , 目前的運作方式。除法將改用新的 math.div() 函式來編寫。此函式的行為與目前的 / 完全相同。

此棄用不影響在 calc() 表達式中使用 /。

程式碼遊樂場

SCSS 語法

@use "sass:math";

// Future Sass, doesn't work yet!
.item3 {
  $row: span math.div(6, 2) / 7; // A two-element slash-separated list.
  grid-row: $row;
}
程式碼遊樂場

Sass 語法

@use "sass:math"

// Future Sass, doesn't work yet!
.item3
  $row: span math.div(6, 2) / 7 // A two-element slash-separated list.
  grid-row: $row

CSS 輸出

.item3 {
  grid-row: span 3 / 7;
}

過渡期過渡期永久連結

相容性 (math.div() 和 list.slash())
Dart Sass
自 1.33.0 版本起
LibSass
✗
Ruby Sass
✗

為了簡化轉換過程，我們首先新增了 math.div() 函式。/ 運算子目前仍然可以執行除法，但同時也會顯示一則棄用警告。使用者應將所有除法運算改用 math.div()。

💡 小知識

請記住，您可以隱藏您無法控制的函式庫的棄用警告！如果您使用的是命令列介面，您可以傳遞 --quiet-deps 旗標；如果您使用的是 JavaScript API，您可以將 quietDeps 選項 設定為 true。

程式碼遊樂場

SCSS 語法

@use "sass:math";

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3
程式碼遊樂場

Sass 語法

@use "sass:math"

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px) // 3

在過渡期間，以斜線分隔的列表也將可用。由於它們還不能使用 / 建立，因此將新增 list.slash() 函式來建立它們。您也可以將 "slash" 作為 $separator 傳遞給 list.join() 函式 和 list.append() 函式。

程式碼遊樂場

SCSS 語法

@use "sass:list";
@use "sass:math";

.item3 {
  $row: list.slash(span math.div(6, 2), 7);
  grid-row: $row;
}
程式碼遊樂場

Sass 語法

@use "sass:list"
@use "sass:math"

.item3
  $row: list.slash(span math.div(6, 2), 7)
  grid-row: $row

CSS 輸出

.item3 {
  grid-row: span 3 / 7;
}
相容性 (一等公民 calc)
Dart Sass
自 1.40.0 版本起
LibSass
✗
Ruby Sass
✗

或者，使用者可以將除法運算包裝在 calc() 表達式中，Sass 會將其簡化為單一數字。

程式碼遊樂場

SCSS 語法

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px); // 3
程式碼遊樂場

Sass 語法

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px) // 3

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

您可以使用 Sass 遷移工具 自動更新您的樣式表，以使用 math.div() 和 list.slash()。

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

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

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

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

預設情況下，Sass 以簡潔模式運行，它只會針對每種類型的棄用警告顯示五次，之後就會隱藏其他警告。這有助於確保使用者知道何時需要注意即將發生的重大變更，而不會產生大量的控制台訊息。

如果您以詳細模式運行 Sass，它會顯示遇到的 *每個* 棄用警告。這在追蹤修復棄用警告的剩餘工作時非常有用。您可以使用命令列上的 --verbose 旗標 或 JavaScript API 中的 verbose 選項 來啟用詳細模式。

⚠️ 注意！

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

隱藏 dependencies 中的棄用警告隱藏 dependencies 中的棄用警告 永久連結

有時，您的 dependencies 會有一些您無能為力的棄用警告。您可以使用命令列上的 --quiet-deps 旗標 或 JavaScript API 中的 quietDeps 選項 來隱藏 dependencies 的棄用警告，同時仍然為您的應用程式顯示它們。

就這個旗標而言，「dependency」是指任何並非僅由入口點樣式表一系列相對載入而來的樣式表。這表示任何來自載入路徑的內容，以及大多數透過自訂匯入器載入的樣式表。

抑制特定棄用警告抑制特定棄用警告 永久連結

如果您確定某個特定的棄用警告對您來說不是問題，您可以使用命令列上的 --silence-deprecation 旗標 或 JavaScript API 中的 silenceDeprecations 選項 來抑制該特定棄用警告。