什么是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強大
1、sass有變量和作用域
2、sass有函數的概念
3、進程控制
條件、循環遍歷、繼承、引用
4、數據結構
數組、map
Less和Sass處理機制不一樣
前者是通過客戶端處理的，后者是通過服務端處理，相比較之下前者解析會比后者慢一點。
關於變量在Less和Sass中的唯一區別就是Less用@，Sass用$
相同之處
Less和Sass在語法上有些共性，比如下面這些：
1、混入(Mixins)——class中的class；
2、參數混入——可以傳遞參數的class，就像函數一樣；
3、嵌套規則——Class中嵌套class，從而減少重復的代碼；
4、運算——CSS中用上數學；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。