關於 Sass 3.3 計畫的變更

本文最初發佈於 gist。

Sass 3.3 即將推出，並帶來幾個重要的全新功能。它支援原始碼映射、SassScript map 以及在 SassScript 中使用 &。為了準備發佈，我們推出了一些候選版本，以確保一切就緒。遺憾的是，它並非如此。

候選版本通常會暴露出新功能中的一些小錯誤和不一致之處，但很少發現真正致命的錯誤。然而，在這種情況下，一些使用者注意到在 SassScript 中使用 & 的問題，這使得我們為 3.3 版該部分制定的相當一部分計畫無法實施。這不是一個致命的問題，我們認為我們有一個很好的計畫來處理它（我稍後會詳細說明），但這確實是一個問題。

背景背景的永久連結

要理解哪裡出了問題，首先您需要了解我們決定讓 & 在 SassScript 中可用的原因。使用者經常想要做的一件事是在 class 後面添加後綴。有時這取代了巢狀選擇器，有時只是為了基於舊的 class 建立新的 class——原因與本次討論無關。當人們嘗試這樣做時，他們會寫類似 .foo { &-suffix { ... } } 的程式碼，但它不起作用。原因是 & 與類型選擇器（例如 h1）或通用選擇器（*）具有相同的語法功能，因為它可以被任何這些選擇器取代。在選擇器中寫 *-suffix 沒有意義，因此 &-suffix 也不被允許。

然而，這並沒有阻止人們想要這樣做。於是我們決定：「好吧，我們已經使用插值（#{}）來支援將文字注入選擇器——我們就用這個吧」。我們決定將 & 添加為 SassScript 中的一種特殊變數，它包含目前選擇器的已解析表示。然後，您可以透過執行 @at-root #{&}-suffix 來模仿 &-suffix^[1]。一切都很美好，直到我們勇敢的使用者發現了這個問題。

問題問題的永久連結

以下是一小段 SCSS 程式碼，展示了這個問題。看看您是否能找出問題所在。

.foo, .bar {
  @at-root #{&}-suffix {
    color: blue;
  }
}

您找到了嗎？沒錯：在這個例子中，& 是 .foo, .bar，這意味著選擇器會編譯成 .foo, .bar-suffix。由於 #{} 注入的是普通的文字，Sass 無法知道它應該如何拆分選擇器。

Chris 和我討論了很久如何解決這個問題。我們考慮添加一個函式來添加後綴，但這樣太冗長了。我們考慮讓 & 將 CSS 規則的編譯拆分成幾個平行的規則，每個規則都有一個單獨的 & 選擇器，但這太複雜了，而且在很多邊緣情況下都失效了。我們最終得出結論，SassScript 中的 & 無法乾淨地支援我們為其設計的用例。

解決方案解決方案的永久連結

我們知道我們想要支援 &-suffix 這種使用情況，但我們原先構想的巧妙計劃失敗了。我們集思廣益，經過討論後，決定支援它的最佳方式就是最直接的方式：我們直接允許 &-suffix。畢竟，這是大多數人在想要這種行為時首先嘗試的方法，而且將 & 直接嵌入選擇器中，我們可以輕鬆地處理選擇器列表。

這意味著**Sass 3.3 將支援 &-suffix**，而不需要 #{} 或 @at-root。我建立了 issue 1055 來追蹤它。在編譯這些選擇器時，如果父選擇器會導致無效的選擇器（例如 *-suffix 或 :nth-child(1)-suffix），我們會在那裡拋出一個錯誤，說明為什麼產生了該選擇器。

我們仍然擔心人們使用 &-suffix 編寫 mixin 的情況，這些 mixin 之後可能無法與某些父選擇器一起使用，但在這種情況下，我們認為這是所有可用選項中危害最小的。

SassScript 中 & 的未來SassScript 中 & 的未來 的永久連結

除了支援 &-suffix 之外，**我們還決定將 SassScript 中的 & 從 3.3 版本中移除**。請放心，它會回歸的——我們認識到它還有其他很好的使用案例，我們打算在下一個主要版本（可能是 3.4）中將它帶回來。此外，它還將附帶一套用於操作其可用選擇器的函式，因此它將比以往任何時候都更強大。

我們目前想暫緩在 SassScript 中使用 & 有兩個原因。首先，我們需要一些時間來創建與之配套的函式，並對它們進行測試。這可能需要以各種方式改變它的工作方式，而我們不想為了做到這一點而進行向後不相容的更改。

第二個原因是，我們花費了相當多的精力宣傳 #{&} 作為 &-suffix 問題的解決方案。這顯然是我們自己的錯誤，但這是事實，也是我們需要處理的事情。讓 &-suffix 可以運作是很棒的，但如果每個人都在使用 #{&}，因為那是我們幾個月前告訴他們的，那麼它就沒有發揮出它應有的作用。在我們提供更進階的功能之前，先發布一個 &-suffix 可以運作但 #{&} 不行的版本，將有助於引導用戶找到解決問題的最佳方法。

@at-root 仍將包含在 Sass 3.3 中。

發布 3.3發布 3.3 的永久連結

不幸的是，這個變更將會延遲 3.3 的發布，但希望不會延遲太久。我預計這項變更的實作相對簡單；主要的障礙是弄清楚該怎麼做，而這部分已經完成了。我計劃在寒假回來後投入大量的時間來推出 3.3 版本，所以希望（不敢保證）它會在一月份的某個時候發布。

---

1. 需要 @at-root 的原因是，Sass 無法可靠地判斷 & 是否在選擇器中使用，就像 & 不與 #{} 一起使用時那樣。 ↩︎