scss、sass、less的對比與區別

什麼是Sass和Less？

　　sass和less都屬於CSS預處理器。

　　css預處理定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲css增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行CSS的編碼工做。通俗地說就是「用一種專門的編程語言，進行Web頁面樣式設計，再經過編譯器轉化爲正常的CSS文件，以供項目使用」。

 

爲何使用CSS預處理器？　　

　　CSS只是一個標記語言，不是編程語言，所以不能夠自定義變量，不能夠引用等等。

css有具體如下幾個缺點：

　　語法不夠強大，好比沒法嵌套書寫，致使模塊化開發中須要書寫不少重複的選擇器；

　　沒有變量和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，致使難以維護。

　　這就致使了咱們在工做中無故增長了許多工做量。而使用CSS預處理器，提供CSS缺失的樣式層複用機制、減小冗餘代碼，提升樣式代碼的可維護性。大大提升了開發效率。

　　可是，CSS預處理器也不是萬金油，CSS的好處在於簡便、隨時隨地被使用和調試。預編譯CSS步驟的加入，讓咱們開發工做流中多了一個環節，調試也變得麻煩。更大的問題在於，預編譯很容易形成後代選擇器的濫用。

 

Sass和Less的區別

不一樣之處

Less環境較Sass簡單

　　　Sass的安裝須要安裝Ruby環境，Less基於Javascript，是須要引入Less.js來處理代碼輸出css到瀏覽器，也能夠在開發環節使用Less，而後編譯成css文件，直接放在項目中。

Less使用較Sass簡單

　　　Less並無裁剪CSS原有的特性，而是在現有CSS語法的基礎上，爲CSS加入程序式語言的特性。

Sass功能較Less強大

　　　一、sass有變量和做用域

　　　二、sass有函數的概念

　　　三、進程控制

　　　　　條件、循環遍歷、繼承、引用

　　　四、數據結構

　　　　　數組、map

Less和Sass處理機制不同

　　　前者是經過客戶端處理的，後者是經過服務端處理，相比較之下前者解析會比後者慢一點。

關於變量在Less和Sass中的惟一區別就是Less用@，Sass用$

 

相同之處

Less和Sass在語法上有些共性，好比下面這些：

一、混入(Mixins)——class中的class； 二、參數混入——能夠傳遞參數的class，就像函數同樣； 三、嵌套規則——Class中嵌套class，從而減小重複的代碼； 四、運算——CSS中用上數學； 五、顏色功能——能夠編輯顏色； 六、名字空間(namespace)——分組樣式，從而能夠被調用； 七、做用域——局部修改樣式； 八、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。