什麼是 CSS 預處理器

CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。

為什麼使用 CSS 預處理器

CSS 預處理器提供許多功能，可讓您更輕鬆地編寫和維護 CSS 程式碼。例如：

• 變數

  使用變數來存儲值，然後在 CSS 程式碼中重複使用這些值，有助於使程式碼更易讀且更易於維護。

• 混入

  混入允許您將一組 CSS 屬性定義為一個單元，然後在整個程式碼中重複使用該單元，這有助於減少重複並使程式碼更具組織性。

• 巢狀選擇器

  巢狀選擇器使用縮排來嵌套選擇器，使程式碼更易於閱讀和理解。

• 運算

  使用運算來在 CSS 程式碼中執行數學運算，使程式碼更具靈活性和可重用性。

• 函式

  使用函式來在 CSS 程式碼中自定義邏輯，使程式碼更簡潔且更易於維護。

流行的 CSS 預處理器

Sass

Sass 是最初由 Hampton Catlin 設計並由 Natalie Weizenbaum 開發的 CSS 語言。

Sass 最初是於2006年用 Ruby 編寫，目前已停止維護，被 Dart Sass 所取代。

Less

Less 於 2009 年由 Alexis Sellier 創建。最初用 Ruby 編寫，之後移植到 Node.js。

Less 最初的靈感來自 Sass，具有精簡的功能集和與 CSS 非常接近的語法，而 Sass 當時並沒有。（Sass 後來受到 Less 的啟發，建立了自己的類似 CSS 語法 SCSS。）

Stylus

受 Sass 和 Less 影響，Stylus 由 TJ Holowaychuk 於2010年創建。

https://chihyuanyip.github.io/2024/04/18/popular-css-preprocessors-sass-less-stylus.html