CSS 學習者們好！歡迎來到我們的小角落！ ？
諸如Sass、Less 和Stylus 之類的預處理器可以改變您編寫樣式的方式，引入變數、巢狀、混合等功能。它們本身不是 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 檢查上述範例的結果並用程式碼進行更多實驗！
使用變數作為斷點使響應式設計更加易於管理和一致。
結果 :
可以透過更改@theme變數輕鬆切換主題，然後套用對應的主題樣式。
結果 :
重複循環：循環可讓您迭代列表或映射，透過動態產生 CSS 來減少重複。
Sass (SCSS) 範例：
這裡，循環會建立不同字體大小的類，而無需手動編寫每個規則。此循環產生三個具有不同字體大小的類，展示循環如何減少 CSS 中的重複性。
動態樣式的條件：條件可讓您根據特定條件套用樣式，讓您的 CSS 更動態。
Less 例：
使用條件，您可以根據變數值套用不同的樣式，非常適合建立動態元件。在此範例中，警報的外觀會根據 @type 是否為警報而變化。
父選擇器引用：父選擇器引用可讓您在巢狀規則中優雅地修改或擴充父選擇器。
手寫筆範例：
（註：是的，這是 Stylus，不是 SCSS，但由於我們沒有這個選項，所以我愛上了 SCSS）
這個 Stylus 範例展示如何簡潔地將樣式應用於父級、其懸停狀態和巢狀元素。它也示範如何使用 & 引用父選擇器或在巢狀規則的條件語句中使用它。
數學運算：預處理器允許在 CSS 中進行數學運算，使您能夠動態計算網格寬度等值。
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 技巧 :有關預處理器的各種文章以及實際範例。
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中文網其他相關文章！
