Sass 3.3 發佈了

Natalie Weizenbaum 發佈於 2014 年 3 月 8 日

在無數候選版本中解決了一堆錯誤之後，我們終於準備好發佈 Sass 3.3.0，代號為「Maptastic Maple」，供公眾使用。此版本有許多令人興奮的新功能，您可以在更新日誌中完整閱讀，但我想特別提請您注意其中三個功能。

SassScript 中的映射SassScript 中的映射 永久連結

作為語言設計者，我們的大部分工作是傾聽使用者的回饋並據此採取行動。這比聽起來要棘手：使用者非常擅長知道他們想要完成的確切事情，但他們往往不清楚這如何融入全局。因此，我們會收到大量的使用者請求，嘗試提煉出尚未滿足的核心需求，並看看是否能提出盡可能簡單地滿足盡可能多需求的功能。

SassScript 映射就是一個很好的例子。我們有很多使用者要求像變數插值之類的功能，這樣他們就可以編寫像 $#{$theme-name}-background-color 這樣的程式碼。其他使用者則想要使用成對列表的內建函式，或者想要一種獲取傳遞給函式的變數名稱的方法。我們最終意識到人們真正想要的核心功能：一種將值與名稱關聯的方法。

大多數程式語言都有一個映射的概念[1]，它是從「鍵」物件到「值」物件的關聯。Sass 3.3 將其作為一等資料結構新增了支援。語法設計得與用於 @media 查詢的語法非常相似。它們看起來像這樣：

$map: (key1: value1, key2: value2, key3: value3);

與列表不同，映射必須始終用括號括起來。() 以前指的是空列表，現在*也*指的是空映射；列表和映射操作都適用於它。

映射不能用作 CSS 值，因為它們不是有效的 CSS 語法。但是，有許多新的內建函式允許使用者定義的 mixin 和函式使用它們。以下是一些特別有用的函式：

  • map-get($map, $key) 使用其鍵在映射中查詢值。例如，使用上面的範例，map-get($map, key2) 將返回 value2。

  • map-merge($map1, $map2) 將兩個映射合併在一起。$map2 中的鍵會覆蓋 $map1 中的鍵，因此這也是將值新增到映射的好方法。例如，map-merge($map, (key1: new-value)) 將返回 (key1: new-value, key2: value2, key3: value3)。

  • map-remove($map, $key) 從映射中移除一個值。例如，map-remove($map, key1) 將返回 (key2: value2, key3: value3)。

除了新的映射函式之外，所有現有的列表函式也適用於映射。列表函式會將每個映射視為一對列表。例如，nth($map, 1) 將返回 (key1 value1)。不僅如此，@each 還具有用於處理映射和成對列表的新語法。例如：

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

產生：

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

來源映射來源映射 永久連結

延續地圖主題，Sass 3.3 開始支援在編譯成 CSS 時產生原始碼對照表。原始碼對照表是一種標準格式，用於告知瀏覽器它們所使用的檔案是如何產生的。對於 Sass 來說，這意味著瀏覽器的開發工具現在可以準確地告訴您每個樣式規則來自 Sass 原始碼檔案的哪一行。目前這僅在 Chrome 中得到良好的支援，但希望其他瀏覽器很快也能加入支援。

從命令列編譯 Sass 時，您只需傳遞 --sourcemap 旗標即可產生原始碼對照表。Sass 會在產生的 .css 檔案旁邊自動產生一個 .css.map 檔案。然後您只需確保瀏覽器看得到您的 .scss 或 .sass 檔案，就可以開始使用了。

更靈活的 &更靈活的 & 永久連結

當我們發佈 Sass 3.0 時，我們加入了對 SCSS 的支援，這意味著我們必須實際解析文件中的所有選擇器。這表示您不能只在選擇器中的任何位置放置父選擇器 &。總體而言，這是一個改進：它捕獲了更多錯誤，並鼓勵使用者編寫更靈活的 mixin。

不幸的是，這也讓一個重要的使用案例變得更加困難。隨著 BEM、OOCSS 和 SMACSS 的普及，人們越來越有興趣在類別名稱後面加上後綴。使用 Sass 時，他們希望編寫 mixin 來做到這一點，而對 & 的限制使得這很難做到。

在 Sass 3.3 中，我們放寬了這些限制。您現在可以寫 &-suffix（或 &_suffix，甚至 &suffix，如果您真的想要這樣寫的話），Sass 會讓它生效。如果這無法套用（例如，如果 & 是 *），Sass 會顯示一條有用的錯誤訊息。

棄用：變數作用域和 !global棄用：變數作用域和 !global 永久連結

我們並非每次都能做到盡善盡美，為了讓 Sass 成為最好的語言，我們偶爾必須改變舊的行為。有時，這些改變可能會導致現有的樣式表停止運作，因此我們有一項政策，針對未來將會改變的樣式表顯示警告訊息。

Sass 3.3 加入了一些棄用項目，但其中最大的棄用項目與變數作用域的運作方式有關。到目前為止，當您在 Sass 的函式、mixin 或 CSS 規則中寫入 $var: value 時，它可能會執行以下兩項操作之一。如果存在名為 $var 的全域變數，它會覆寫該變數。否則，它會建立一個僅在目前大括號內可見的區域變數。

這是一個相當大的問題，因為任何給定的變數賦值都可能修改一個它無法得知是否存在變數。我們希望遷移到一個更好的系統，在該系統中，除非賦值明確指出要這樣做（例如 $var: value !global），否則在區域作用域中賦值給變數不會覆寫全域變數。

為了避免破壞現有的樣式表，我們尚未進行此變更。相反地，如果全域變數被區域宣告覆寫，我們現在會顯示一則棄用警告，建議使用者加入 !global。目前，!global 除了讓警告消失之外沒有其他作用，但在未來的版本中，它將會如上所述運作。

就這樣了就這樣了 永久連結

實際上還有更多新功能，但礙於篇幅限制，本文無法一一列舉。如果您想查看完整的新功能列表，請參閱更新日誌。您也可以在SassMeister上體驗新功能，或是在自己的電腦上執行gem update sass來更新。祝您使用愉快！

  1. 有些程式語言稱它們為「雜湊」、「字典」或「關聯陣列」。JavaScript 則因為一些奇怪的歷史原因稱它們為「物件」。↩︎