掌握 CSS 預處理器：Sass、Less 和 Stylus 指南

CSS 學習者們好！歡迎來到我們的小角落！ ？

介紹

諸如Sass、Less 和Stylus 之類的預處理器可以改變您編寫樣式的方式，引入變數、巢狀、混合等功能。它們本身不是 CSS，而是編譯成 CSS 的工具，提供更強大且可維護的樣式設定方法。讓我們更深入地研究這些神奇的工具。

您將在本文中學到什麼？

• 了解預處理器：它們的本質以及它們如何增強 CSS。

• 高階功能：超越循環、條件和更複雜嵌套的基礎知識。

• 選擇您的預處理器：更詳細的比較，包括社群支援和工具。

• 實際範例：示範進階用例並提供詳細說明。

• 最佳實務：有效使用預處理器的技巧。

• 資源：下一步要去哪裡繼續學習。

什麼是 CSS 預處理器？

CSS 預處理器擴展了 CSS 語言，增加了允許更模組化、可讀和可維護的樣式表的功能。它們編譯成標準 CSS，然後由瀏覽器使用。

CSS 預處理器的主要功能

變數：變數可讓您儲存想要輕鬆重複使用和變更的資訊。

Sass 範例 (SCSS)：

這裡， $primary-color 定義一次並在整個樣式表中使用。如果顏色需要改變，只需在一個地方更新即可。

？順便說一句，這是一篇關於 Sass 和 SCSS 之間差異的精彩文章。

巢狀：巢狀可讓您將相關樣式分組，使 CSS 更具可讀性。

Less 例：

這嵌套了 .nav、其 ul、li 和 a 元素的樣式，將相關樣式保持在一起。

Mixins： Mixins 是可重複使用的類別或屬性集，可以包含在其他選擇器中。

手寫筆範例：

（註：是的，這是 Stylus，不是 SCSS，但由於我們沒有這個選項，所以我愛上了 SCSS）

border-radius mixin 使用參數 n 定義。 .button 類別使用此 mixin，為不同的瀏覽器前綴套用相同的邊框半徑。

函數：函數可以動態產生CSS。

Sass 範例 (SCSS)

此函數將像素轉換為em，從而更容易在不同的基本字體大小之間保持一致的排版。

匯入：匯入可讓您將 CSS 拆分為多個檔案以便更好地組織。

Less 例：

變數檔案被匯入到主檔案中，允許在需要時使用@link-color。

？注意：您可以使用 codepen.io 檢查上述範例的結果並用程式碼進行更多實驗！

實際用例

響應式設計 - Sass (SCSS*) 範例：*

使用變數作為斷點使響應式設計更加易於管理和一致。

結果 :

主題 - 更少範例：

可以透過更改@theme變數輕鬆切換主題，然後套用對應的主題樣式。

結果 :

CSS 預處理器的進階功能

重複循環：循環可讓您迭代列表或映射，透過動態產生 CSS 來減少重複。

Sass (SCSS) 範例：

這裡，循環會建立不同字體大小的類，而無需手動編寫每個規則。此循環產生三個具有不同字體大小的類，展示循環如何減少 CSS 中的重複性。

動態樣式的條件：條件可讓您根據特定條件套用樣式，讓您的 CSS 更動態。

Less 例：

使用條件，您可以根據變數值套用不同的樣式，非常適合建立動態元件。在此範例中，警報的外觀會根據 @type 是否為警報而變化。

父選擇器引用：父選擇器引用可讓您在巢狀規則中優雅地修改或擴充父選擇器。

手寫筆範例：

（註：是的，這是 Stylus，不是 SCSS，但由於我們沒有這個選項，所以我愛上了 SCSS）

這個 Stylus 範例展示如何簡潔地將樣式應用於父級、其懸停狀態和巢狀元素。它也示範如何使用 & 引用父選擇器或在巢狀規則的條件語句中使用它。

數學運算：預處理器允許在 CSS 中進行數學運算，使您能夠動態計算網格寬度等值。

Sass (SCSS) 範例：

此範例使用數學根據網格系統設定寬度。

進階 ~ 實際用例

複雜主題 - Sass (SCSS) 範例：

上面的程式碼示範如何使用地圖和循環動態建立和應用主題，從而輕鬆切換主題。

結果：

響應式實用程式 - 較少範例：

這會為不同的標題大小建立實用程式類，展示如何輕鬆產生響應式實用程式。

結果 :

選擇預處理器

• Sass（具有 SCSS 語法）被廣泛使用，具有出色的工具，並且由於其功能通常被認為更強大。

• Sass 具有強大的功能，例如用於繼承樣式的 @extend 指令，並且受到 Compass 等工具的廣泛支援。

• Less 以其簡單性和與 CSS 的相似性而聞名，使其成為預處理的溫和介紹。

• Less擁有基於JavaScript的編譯器，有利於瀏覽器內編譯進行開發。

• Stylus 提供了非常靈活的語法，您可以選擇縮排而不是使用括號，這對於某些開發人員來說更具可讀性。

使用預處理器的最佳實務

• 模組化 CSS ：將樣式分割為邏輯的、可重複使用的模組或部分。

• 避免深層嵌套：雖然嵌套很強大，但嵌套太多會導致複雜且難以覆蓋的 CSS。

• 使用變數：對於顏色、尺寸或您可能需要在網站範圍內變更的任何值。

• 適度混合：將它們用於常見模式，但要小心過度使用，如果不能有效編譯，這可能會使你的 CSS 膨脹。

• Linting ：使用 stylelint 等工具確保您的預處理器程式碼遵循最佳實務。

進一步學習的資源

薩斯：

• 官方文件 :理解 Sass 語法和功能的最佳起點。

• 進階 Sass 訓練 :在實際專案中使用 Sass 的技巧和最佳實務。

• Playground : 一個線上 Sass 遊樂場，用於測試和分享 Sass 程式碼片段。

減：

• 官方文件 ： 了解所有功能 更少優惠。

• Less Hat : Less 的 mixin 和函數的集合，對於常見的 CSS 任務很有用。 請注意，該項目並未積極維護。

• Playground : 在瀏覽器中測試較少的程式碼。

手寫筆：

• 官方文件 :深入了解 Stylus 的功能。

• Stylus 教學：學習 Stylus - 初學者到中級使用者的逐步指南。

• Stylus REPL : 用來嘗試 Stylus 程式碼的互動式環境。

通用 CSS 預處理器：

• CSS 技巧 :有關預處理器的各種文章以及實際範例。

• Smashing Magazine : CSS 預處理技術的深入文章。

• Codeacademy :提供有關 CSS 預處理器的互動課程。

工具與整合：

• Prepros : 用於編譯預處理器的 GUI 工具，具有即時瀏覽器刷新功能。

• Webpack 帶有載入器： 用於將預處理器整合到您的建置管道中。

• Koala : 一個開源跨平台 GUI 應用程序，用於編譯 less、sass。 Koal 是我的最愛之一，但請注意，Koala 的專案已存檔且未積極維護。

結論

像 Sass、Less 和 Stylus 這樣的 CSS 預處理器不僅用於編寫 CSS；也用於編寫 CSS。他們致力於編寫更聰明、更易於維護的 CSS。它們引入了一定程度的抽象，允許更清晰、更有組織的樣式表，並且它們為開發人員提供了 CSS 本身無法提供的功能。透過使用變數、巢狀、mixin 和其他進階功能，您可以顯著提高專案的工作效率和可擴展性。

請記住，Sass、Less 或 Stylus 之間的選擇不僅與功能有關，還與工作流程偏好、社群支援和工具整合有關。隨著您使用這些工具不斷成長，您會發現它們不僅加快了您的開發流程，而且還為 CSS 設計和架構開闢了新的可能性。

所以深入研究並嘗試這些預處理器。繼續學習，繼續編碼，願您的樣式表永遠模組化且有效率！ ？

---

？大家好，我是 Eleftheria，社群經理、 開發人員、公共演講者和內容創作者。

？如果您喜歡這篇文章，請考慮分享。

？ 所有連結 | X | 領英

以上是掌握 CSS 預處理器：Sass、Less 和 Stylus 指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！