功能觀察：CSS 導入與 CSS 相容性

Dart Sass 1.11 已經釋出，並帶來了幾個新功能。這是一個令人興奮的時刻，因為它標誌著自 Dart Sass 推出以來，第一個添加到該語言的主要新功能。這也是第一個採用新流程的功能版本，從提案到測試再到實作。

CSS 導入CSS 導入永久連結

Dart Sass 1.11 最大的功能是支援導入純 CSS 檔案。這是一個期待已久的功能，雖然我們最初計畫等到推出即將推出的模組系統後再加入它，但我們最終決定提前實作。

您現在可以導入一個 CSS 檔案，例如 `styles.css`，只需編寫 `@import "styles"`。該檔案將被解析為純 CSS，這意味著任何 Sass 功能，例如變數、mixin 或插值，都將不被允許。它定義的 CSS 將成為您樣式表的一部分，並且可以像其他任何樣式一樣被 `@extend`。

有一些注意事項：由於 SCSS 是純 CSS 的超集，它仍然會將 `@import "styles.css"`（帶有明確的副檔名）編譯為 CSS 的 `@import` 規則。如果您想將 CSS 檔案導入 Sass 編譯，則必須省略副檔名。

此外，此功能尚未在 LibSass 中完全實作。它仍然保留了舊的行為，導入 CSS 檔案，但將它們解析為 SCSS，允許所有額外的 Sass 功能。此行為將很快被棄用，最終它將會對任何非純 CSS 產生錯誤，就像 Dart Sass 現在的行為一樣。

CSS `min()` 和 `max()`CSS min() 和 max() 永久連結

Dart Sass 1.11 也新增了對 CSS 的 `min()` 和 `max()` 數學函數的支援。對於不熟悉的人來說，這些函數的工作方式很像 `calc()`，只不過它們會返回一系列值的最小值或最大值。例如，您可以編寫 `width: max(50%, 100px)`，使您的元素寬度為父元素寬度的 50% 或 100px，取較大者。

由於 Sass 擁有自己的名為 `min()` 和 `max()` 的函數，因此很難使用這些 CSS 函數……直到現在。Dart Sass 1.11 將根據您是否傳入動態 Sass 值，智慧地決定是使用純 CSS 函數還是內建的 Sass 函數。例如：

• 如果您傳入一個變數，例如 `max($width, 100px)`，則將呼叫 Sass 函數。
• 如果您呼叫另一個 Sass 函數，例如 `max(compute-width(), 100px)`，則將呼叫 Sass 函數。
• 如果您只使用純 CSS 數字，例如 `max(50% + 10px, 100px)`，它將編譯為純 CSS 函數。
• 即使您使用插值，例如 `max(50% + #{$width / 2}, #{$width})`，它仍然會編譯為純 CSS 函數。

這保留了與 Sass 函數現有用法的向後相容性，同時也允許使用者以與在純 CSS 中相同的方式使用 CSS 函數。

LibSass (LibSass) 和 Ruby Sass (Ruby Sass) 尚未實作此功能。

範圍格式媒體查詢範圍格式媒體查詢 永久連結

CSS 媒體查詢 Level 4 定義了一種範圍語法，用於定義某些媒體 查詢

@media (width > 500px) {
  /* ... */
}

Dart Sass 1.11 新增了對此語法的支援。它的運作方式與現有的媒體查詢支援相同：您可以使用插值或純 Sass 表達式將 Sass 邏輯注入查詢中，並且它們仍然可以被 巢狀。

@media (width > $width) {
  @media (height < #{$height}) {
    /* ... */
  }
}

LibSass (LibSass) 和 Ruby Sass (Ruby Sass) 尚未實作此功能。

正規化識別符號跳脫字元正規化識別符號跳脫字元 永久連結

最後一個相容性改進是一個比較邊緣的情況，但仍然值得一提：Sass 解析識別符號中跳脫字元的方式已得到改進，以更好地符合 CSS 規範。

跳脫字元現在被正規化為標準格式，這意味著（例如）éclair 和 \E9clair 被解析為相同的值（在這種情況下，為 éclair）。在此更改之前，如果寫入了跳脫字元，它將始終按原樣保留，因此 str-length(\E9clair) 將返回 8，即使該識別符號對 CSS 的意義與 éclair 完全相同。

我們預計這不會影響很多使用者，但我們始終致力於使 Sass 盡可能接近 CSS 的語義。這是該路徑上一個雖小但重要的 步驟。

LibSass (LibSass) 和 Ruby Sass (Ruby Sass) 尚未實作此功能。