擁抱 Sass：為什麼你應該停止使用 Vanilla CSS

當我第一次聽說 Sass 和其他 CSS 預處理器時，我的確切想法並不是很熱情。 “為什麼我們需要另一個工具來處理已經像 CSS 一樣漂亮的東西？”。 “我不會用那個”。 “我的 CSS 已經足夠有序，不需要它”。 “預處理器適用於不知道如何編寫 CSS 的人，如果您知道如何編寫 CSS，則不需要預處理器”。 “畢竟，處理器是為不知道如何編寫 CSS 的人準備的。 如果他們這樣做了，他們就不需要預處理器了”。 我實際上避開了它們一段時間，直到我被迫在幾個項目中使用它。

直到最近，當我不得不在一個項目中切換回 vanilla CSS 時，我才意識到我有多喜歡使用 Sass。 在那段時間裡，我學到了很多，我決定讚美薩斯，讓這個世界變得更美好，讓你成為一個更快樂的人！

為什麼仍然使用 Sass？

組織：@import

我剛才提到的這個項目，一個大型電子商務網站，只有一個 CSS 文件，其中包含 7184 行未壓縮的樣式聲明。 是的，你沒看錯：七千一百八十四行 CSS。 我確信這不是業界前端開發人員必須處理的最大的 CSS 文件，但它足夠大，可以完全一團糟。

這是您需要 Sass 的第一個原因：它可以幫助您組織和模塊化您的樣式表。 它不是變量，也不是嵌套。 對我來說，Sass 的關鍵特性是部分以及它如何擴展 CSS @import 規則以允許它導入 SCSS 和 Sass 文件。 在實踐中，這意味著您將能夠將巨大的 style.css 文件拆分為幾個更易於維護、理解和組織的較小文件。

@import 規則幾乎與 CSS 本身一樣長。 然而，它卻名聲不佳，因為當您在 CSS 文件中使用 @import 時，您會觸發單獨的 HTTP 請求，每個要導入的 CSS 文件都有一個請求。 這可能會損害您網站的性能。 那麼你在 Sass 中使用它會發生什麼？ 如果您從未停下來思考“預處理器”一詞的含義，那麼現在是時候了。

預處理器是一個程序，它處理其輸入數據以產生用作另一個程序輸入的輸出。 ——維基百科

所以，回到我們的 @import 規則，這意味著 @import 將由 Sass 處理，我們所有的 CSS 和 SCSS 文件將被編譯成一個文件，最終將出現在我們的實時站點中。 用戶只需提出一個請求並下載一個文件，而您的項目結構可以由數百個模塊化文件組成。 這就是典型 Sass 項目的 style.scss 的樣子：

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

不要重複自己：變量

任何讚美 Sass 的文章都可能首先提到它的明星特性——變量。 變量最常見的用途是調色板。 有多少次你發現幾個應該是相同顏色的聲明，因為沒有人使用相同的十六進制代碼，最終在 CSS 中顯示為略有不同的陰影？ 薩斯來救援。 在 Sass 中，您可以聲明幾乎任何值的變量。 所以，我們的調色板可以是這樣的：

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

以“$”開頭的單詞是 Sass 變量。 這意味著稍後在您的樣式表中，您將能夠使用這些詞，並且它們將被映射到您之前定義的值：

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

想像一下這將如何改變我們的 7184 行 CSS 代碼，你可能現在就開始渴望 Sass。 更好的是，想像一下品牌重新設計，您需要更新 CSS 中的所有顏色。 使用 Sass，您唯一需要做的就是更新這些變量的聲明一次，然後 baam！ 更改將圍繞您的樣式表進行。

我在 Sass 遊樂場 Sassmeister 中編寫了這個示例。 所以繼續嘗試將​​這些變量更改為其他變量。

變量的用處不僅限於顏色，還包括字體聲明、大小、媒體查詢等等。 這是一個非常基本的例子，可以給你一個想法，但相信我，Sass 的可能性是無窮無盡的。

更乾淨的源代碼：嵌套

嵌套可能是 Sass 中被提及次數第二多的特性。 當我在使用 Sass 後回到 vanilla CSS 時，我正在查看的 CSS 文件看起來非常混亂，以至於我不確定它是否被縮小了。 沒有嵌套，vanilla CSS 看起來並不比漂亮打印的 .min.css文件更好：

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

使用嵌套，您可以在聲明的大括號之間添加類。 Sass 將非常直觀地編譯和處理選擇器。 您甚至可以使用“&”字符來獲取父選擇器的引用。 回到我們的示例 CSS，我們可以將其轉換為：

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

它看起來很漂亮，更容易閱讀。 隨意玩這個例子。

再次！ 不要重複自己：混合和擴展

CSS 中的重複總是難以避免。 再強調一點也沒有什麼壞處，尤其是當 Sass 為您提供 mixins 和擴展時。 它們都是強大的功能，有助於避免大量重複。 mixins 和extends 的可能性似乎沒有盡頭。 使用 mixins，您可以進行參數化 CSS 聲明並在整個樣式表中重用它們。

例如，假設您有一個盒子模塊，裡面有一個按鈕。 您希望框的邊框和按鈕的背景顏色相同。 使用 vanilla CSS，您可以執行以下操作：

 .box { border: 2px solid red; } .box .button { background: red; }

假設您現在想要相同的盒子模塊，但顏色不同。 您將在 CSS 中添加如下內容：

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

現在，假設您想要一個盒子模塊，但邊框更薄。 你會添加：

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

很多重複，對吧？ 使用 Sass，您可以抽像出這些案例以減少重複。 你可以像這樣定義一個mixin：

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

因此，您的源代碼可以簡化為：

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

看起來很漂亮，對吧？ 玩這個例子。 您可以創建自己的 mixin 庫，或者更好的是，您可以使用其中一個社區庫。

擴展是類似的，它們讓您可以將屬性從一個選擇器共享到另一個選擇器。 但是，它們不是輸出多個聲明，而是輸出一個類列表而不重複您的屬性。 這樣，您也可以避免在輸出中重複代碼。 讓我們忘記前面示例中的按鈕，看看@extend 如何與 .boxes一起工作。

假設您聲明了第一個框：

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

現在您需要兩個與此類似的框，但邊框顏色不同。 您可以執行以下操作：

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

這是編譯後的 CSS 的樣子：

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

很強大，對吧？ 您可以在此處找到示例。 如果您查看生成的 CSS，您會發現.box類已包含在輸出中。 如果您不想要這種行為，您可以將@extend與“佔位符”結合使用。 佔位符是一種特殊的選擇器，不會在 CSS 中輸出類。 例如，我有時會發現自己經常重置列表的默認樣式。 我通常將@extend 與這樣的佔位符一起使用：

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

然後，您可以在所有樣式表中重用此模式：

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

您編譯的 CSS 將如下所示：

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

在此處查看示例。

還有更多嗎？

絕對地！ 我不想讓這篇文章過於復雜，但是有一個Sassy的世界等著你去發現； 除此之外還有很多功能：操作、帶有 // 的單行註釋、函數、if 循環……如果你曾經想過“用 CSS 做一些 'X' 的事情會很棒”，我敢肯定那個東西'X'已經由Sass完成了。 “CSS with superpowers”是它的標語，這再貼切不過了。

結論

去訪問安裝頁面並開始黑客攻擊！ 相信我，你不會後悔的。

是的，有一些 Sass 的替代品。 其他預處理器（LESS、Stylus）、後處理器、Grunt 等。甚至還有 CSS 變量。 我並不是說 Sass 是唯一的技術。 我只想說這是最好的！ 至少現在。 不相信我說的話？ 來吧，自己嘗試一下。 你不會後悔的！