Sass 與瀏覽器相容性

Sass 的核心設計原則之一始終是**盡可能減少對 CSS 的理解**。作為一個 CSS 預處理器，我們當然必須理解 CSS 的語法，但我們盡可能避免關心它的*語義*——樣式背後的含義。這表示 Sass 不知道哪些屬性是有效的，哪些 HTML 元素實際存在，甚至很大程度上也不知道大多數 @-rules 的語法為何。

我們從中受益良多。Sass 對 CSS 的內建知識越少，它就越不容易與新的 CSS 功能產生衝突。想像一下，每次想要使用新的 CSS 屬性都必須提交功能請求——那會很糟糕！相反地，除非實際的*語法*發生變化（這種情況要少得多），舊版本的 Sass 將會繼續正常運作。

由於這種分離，我們從來不需要太擔心瀏覽器相容性。Sass 只會將它收到的任何 CSS 傳遞出去。使用者自行決定哪些樣式適用於哪些瀏覽器，這給了他們很大的靈活性，也讓我們這些設計師少了一個棘手的決定。

但儘管有這個一般原則，還是有一些情況下 CSS 知識是必要的。一個重要的例子是 @extend，它需要了解很多關於選擇器的含義才能正確地合併它們並去除重複的樣式。屬性值有時也需要語義知識——例如，我們必須知道如何解釋顏色。

其中一個案例就讓我們吃足了苦頭。很久以前，我們決定始終將透明顏色輸出為關鍵字 transparent，因為 IE6 到 8 都支援它，而替代方案 rgba() 語法則不支援。但事實證明，在較新版本的瀏覽器中情況正好相反：在 IE10 中，background-color: transparent 的元素不會觸發 :hover 樣式，但使用 background-color: rgba(0, 0, 0, 0) 則會觸發。謝謝你啊，IE！

所以我們面臨一個兩難的局面。是維持現有的行為，與已經過時且沒人使用的舊瀏覽器相容，還是選擇一個在新式瀏覽器上運作得更好的新行為？選擇很明顯：我們決定始終輸出 rgba(0, 0, 0, 0)。

此外，我們還想制定一個通用的規則來指導我們決定哪些瀏覽器我們願意視為過時，哪些瀏覽器我們將繼續支援（無論這對相關行為意味著什麼）。我們決定，如果根據 StatCounter GlobalStats 的統計，某個變更對全球瀏覽器市佔率的影響不到 2%，我們就願意進行這個變更。

這個限制並非一成不變。我們保留在未來更改它的權利，並做出可能影響更多瀏覽器的個別決定。但這是我們關注的通用準則，我們希望讓你們都知道。