什麼是 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年創建。