流行 CSS 預處理器：Sass、Less 與 Stylus
什麼是 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