流行 CSS 預處理器:Sass、Less 與 Stylus

更新 發佈閱讀 2 分鐘

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


留言
avatar-img
Chih-Yuan Yip的沙龍
2會員
6內容數
Chih-Yuan Yip的沙龍的其他內容
2024/08/09
PyTorch 是一個開源的 Python 機器學習庫,基於 Torch 庫,底層由 C++ 實現,應用於人工智慧領域,如電腦視覺和自然語言處理等。 PyTorch 2.4 引入了多項新功能和改進,包括支援 Python 3.12、AOTInductor 凍結功能、新的高階 Python 自訂運算
Thumbnail
2024/08/09
PyTorch 是一個開源的 Python 機器學習庫,基於 Torch 庫,底層由 C++ 實現,應用於人工智慧領域,如電腦視覺和自然語言處理等。 PyTorch 2.4 引入了多項新功能和改進,包括支援 Python 3.12、AOTInductor 凍結功能、新的高階 Python 自訂運算
Thumbnail
2024/07/01
NumPy 是 Python 語言的一個擴充程式庫,支援高階大規模的多維陣列與矩陣運算的數學函式函式庫。 NumPy 2.0.0 是自 2006 年以來的第一個主要發行版本,此重要版本標誌著 NumPy 發展歷程中的一項重要里程碑,為使用者提供了豐富的增強功能和改進,並為未來的功能開發奠定了基礎。
Thumbnail
2024/07/01
NumPy 是 Python 語言的一個擴充程式庫,支援高階大規模的多維陣列與矩陣運算的數學函式函式庫。 NumPy 2.0.0 是自 2006 年以來的第一個主要發行版本,此重要版本標誌著 NumPy 發展歷程中的一項重要里程碑,為使用者提供了豐富的增強功能和改進,並為未來的功能開發奠定了基礎。
Thumbnail
2024/06/18
Selenium 是一個範圍廣泛的工具和函式庫的總稱專案,用於啟用和支援網頁瀏覽器的自動化。Selenium WebDriver 提供了 C#、JavaScript、Java、Python、Ruby 等多種語言的 API,可以用於編寫自動化測試軟體。 在定位元素時,WebDriver 提供對這 8
Thumbnail
2024/06/18
Selenium 是一個範圍廣泛的工具和函式庫的總稱專案,用於啟用和支援網頁瀏覽器的自動化。Selenium WebDriver 提供了 C#、JavaScript、Java、Python、Ruby 等多種語言的 API,可以用於編寫自動化測試軟體。 在定位元素時,WebDriver 提供對這 8
Thumbnail
看更多
你可能也想看
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
在本章節中,我們介紹了 CSS 偽元素的基本概念和常見用法,通過一些示例,我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外,我們還探討了一些高級用法,如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
Thumbnail
在本章節中,我們介紹了 CSS 偽元素的基本概念和常見用法,通過一些示例,我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外,我們還探討了一些高級用法,如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
不專業分享個人學習 SCSS 的筆記,知識來源為YTB講解,各路大神文章。
Thumbnail
不專業分享個人學習 SCSS 的筆記,知識來源為YTB講解,各路大神文章。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
CSS 樣式採用規則:先看權重,再看誰後
Thumbnail
CSS 樣式採用規則:先看權重,再看誰後
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News