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