流行 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
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
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()方法來處理特定圖案的解法以及相關技術總結。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News