Sass和Less都屬于CSS預處理器；所謂CSS預處理器，就是用一種專門的編程語言，進行Web頁面樣式設計，再通過編譯器轉化為正常的CSS文件，以供項目使用。

Sass和Less的比較

相同之處：

1、混入(Mixins)——class中的class；

2、參數混入——可以傳遞參數的class，就像函數一樣；

3、嵌套規(guī)則——Class中嵌套class，從而減少重復的代碼；

4、運算——CSS中用上數學；

5、顏色功能——可以編輯顏色；

6、名字空間(namespace)——分組樣式，從而可以被調用；

7、作用域——局部修改樣式；

8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

不同之處：

1、Less環(huán)境較Sass簡單

Cass的安裝需要安裝Ruby環(huán)境，Less基于JavaScript，是需要引入Less.js來處理代碼輸出css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放在項目中，有l(wèi)ess.app、SimpleLess、CodeKit.app這樣的工具，也有在線編輯地址。

2、Less使用較Sass簡單

LESS并沒有裁剪CSS原有的特性，而是在現有CSS語法的基礎上，為CSS加入程序式語言的特性。只要你了解CSS基礎就可以很容易上手。

3、從功能出發(fā)，Sass較Less略強大一些

①sass有變量和作用域。

-$variable，likephp；

-#｛$variable｝likeruby；

-變量有全局和局部之分，并且有優(yōu)先級。

②sass有函數的概念；

-@function和@return以及函數參數（還有不定參）可以讓你像js開發(fā)那樣封裝你想要的邏輯。

-@mixin類似function但缺少像function的編程邏輯，更多的是提高css代碼段的復用性和模塊化，這個用的人也是最多的。

-ruby提供了非常豐富的內置原生api。

③進程控制：

-條件：@if@else；

-循環(huán)遍歷：@for@each@while

-繼承：@extend

-引用：@import

④數據結構：

-$list類型=數組；

-$map類型=object；

其余的也有string、number、function等類型

4、Less與Sass處理機制不一樣

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

5、關于變量在Less和Sass中的唯一區(qū)別就是Less用@，Sass用$。