less&sass&scss

警告
本文最后更新于 2023-07-07,文中内容可能已过时。

Sass 和 Less 都屬於 CSS 前置處理器,CSS 前置處理器定義了一種新的語言,其基本思想是,用一種專門的程式設計語言,為 CSS 增加了一些程式設計的特性,將 CSS 作為目標生成檔,然後開發者就只要使用這種語言進行 CSS 的編碼工作。
轉化成通俗易懂的話來說就是 “用一種專門的程式設計語言,進行 Web 頁面樣式設計,再通過編譯器轉化為正常的 CSS 檔,以供專案使用”。

為什麼,什麼時候要使用 CSS 前置處理器? (Why, When)

CSS 有具體以下幾個缺點:

  • 語法不夠強大,比如無法嵌套書寫,導致模組化開發中需要書寫很多重複的選擇器
  • 沒有變數和合理的樣式複用機制,使得邏輯上相關的屬性值必須以字面量的形式重複輸出,導致難以維護

這就導致了我們在工作中無端增加了許多工作量。而使用 CSS 前置處理器可大大提高了我們的開發效率:

  • 提供 CSS 缺失的樣式層複用機制
  • 減少冗餘碼
  • 提高樣式代碼的可維護性。

但是,CSS 的好處在於簡便、隨時隨地被使用和調試。這就使得預編譯 CSS 步驟的加入具有以下缺點:

  • 開發工作流中多了一個環節,調試也變得更麻煩
  • 預編譯很容易造成後代選擇器的濫用

所以我們在實際項目中衡量預編譯方案時,還是得想想,比起帶來的額外維護開銷,CSS 前置處理器有沒有解決更大的麻煩。

  • 系統級框架開發 (大型複雜的樣式設計)
  • 持續維護

Less、Sass/Scss 是什麼? (What)

Less

是一種動態樣式語言。對 CSS 賦予了動態語言的特性,如變數、繼承、運算、函數。
Less 既可以在用戶端上運行 (支援 IE 6+, Webkit, Firefox),也可在服務端運行。

Sass

是一種動態樣式語言,Sass 語法屬於縮排語法,
比 CSS 比多出好些功能(如變數、嵌套、運算,混入 (Mixin)、繼承、顏色處理,函數等),更容易閱讀。

Sass 與 Scss 的關係

Sass 的縮排語法,對於寫慣 CSS 的前端開發者來說很不直觀,也不能將 CSS 代碼加入到 Sass 裡面,因此 Sass 語法進行了改良,Sass 3 就變成了 Scss(Sassy CSS)。與原來的語法相容,只是用{}取代了原來的縮進。Sass 相當於 Scss 的嚴格模式。

Sass 和 Less 的比較

相同點

Less 和 Sass 在語法上有些共性,比如下面這些:

  1. 混入 (Mixins)——class 中的 class
  2. 參數混入——可以傳遞參數的 class,就像函數一樣
  3. 嵌套規則——Class 中嵌套 class,從而減少重複的代碼
  4. 運算——CSS 中用上數學
  5. 顏色功能——可以編輯顏色
  6. 名字空間 (namespace)——分組樣式,從而可以被調用
  7. 作用域——局部修改樣式
  8. JavaScript 賦值——在 CSS 中使用 JavaScript 運算式賦值

不同點

  1. 實現方式
  • Less 是基於 JavaScript,是在用戶端處理的
  • Sass 是基於 Ruby 的,是在伺服器端處理的
  1. 關於變數在 Less 和 Sass 中的唯一區別就是 Less 用@,Sass 用$
  2. less 中的變量運算可帶、可不帶單位,Sass 需要帶單位元
  3. 語法不同,請詳見 Less、Sass 官網

選用 Less 還是 Sass ?

無論是學習資料,討論情況,以及項目使用情況 Sass/Scss 都優於 Less,比如 Bootstrap 4 就使用的 Sass, 但是 Less 的使用更加簡單,使用門檻也較低,內網開發的情況,Less 則更加適合。

Buy me a coffee~
支付宝
微信
0%