less&sass&scss
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 在語法上有些共性,比如下面這些:
- 混入 (Mixins)——class 中的 class
- 參數混入——可以傳遞參數的 class,就像函數一樣
- 嵌套規則——Class 中嵌套 class,從而減少重複的代碼
- 運算——CSS 中用上數學
- 顏色功能——可以編輯顏色
- 名字空間 (namespace)——分組樣式,從而可以被調用
- 作用域——局部修改樣式
- JavaScript 賦值——在 CSS 中使用 JavaScript 運算式賦值
不同點
- 實現方式
- Less 是基於 JavaScript,是在用戶端處理的
- Sass 是基於 Ruby 的,是在伺服器端處理的
- 關於變數在 Less 和 Sass 中的唯一區別就是 Less 用
@
,Sass 用$
- less 中的變量運算可帶、可不帶單位,Sass 需要帶單位元
- 語法不同,請詳見 Less、Sass 官網
選用 Less 還是 Sass ?
無論是學習資料,討論情況,以及項目使用情況 Sass/Scss 都優於 Less,比如 Bootstrap 4 就使用的 Sass, 但是 Less 的使用更加簡單,使用門檻也較低,內網開發的情況,Less 則更加適合。