這篇文章主要解答以下幾個問題，供前端開發者的新手參考。
1、什麼是Sass和Less？
2、為什麼要使用CSS前處理器？
3、Sass和Less的比較
4、為什麼選擇使用Sass而不是Less？
什麼是Sass和Less？
Sass和Less都屬於CSS前處理器，那什麼是 CSS 前處理器呢？
CSS 前處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為 CSS 增加了一些程式設計的特性，將 CSS 作為目標生成檔案，然後開發者就只要使用這種語言進行CSS的編碼工作。
轉化成通俗易懂的話來說就是“用一種專門的程式語言，進行 Web 頁面樣式設計，再通過編譯器轉化為正常的 CSS 檔案，以供專案使用”。
為什麼要使用CSS前處理器？
作為前端開發人員，大家都知道，Js中可以自定義變數，而CSS僅僅是一個標記語言，不是程式語言，因此不可以自定義變數，不可以引用等等。
CSS有具體以下幾個缺點：
語法不夠強大，比如無法巢狀書寫，導致模組化開發中需要書寫很多重複的選擇器；
沒有變數和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護。
這就導致了我們在工作中無端增加了許多工作量。而使用CSS前處理器，提供 CSS 缺失的樣式層複用機制、減少冗餘程式碼，提高樣式程式碼的可維護性。大大提高了我們的開發效率。
但是，CSS前處理器也不是萬金油，CSS的好處在於簡便、隨時隨地被使用和除錯。預編譯CSS步驟的加入，讓我們開發工作流中多了一個環節，除錯也變得更麻煩了。更大的問題在於，預編譯很容易造成後代選擇器的濫用。
所以我們在實際專案中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，CSS前處理器有沒有解決更大的麻煩。
Sass和Less的比較
不同之處
- 1、Less環境較Sass簡單
Cass的安裝需要安裝Ruby環境，Less基於JavaScript，是需要引入Less.js來處理程式碼輸出css到瀏覽器，也可以在開發環節使用Less，然後編譯成css檔案，直接放在專案中，有less.app、SimpleLess、CodeKit.app這樣的工具，也有線上編輯地址。
- 2、Less使用較Sass簡單
LESS 並沒有裁剪 CSS 原有的特性，而是在現有 CSS 語法的基礎上，為 CSS 加入程式式語言的特性。只要你瞭解 CSS 基礎就可以很容易上手。
- 3、從功能出發，Sass較Less略強大一些
①sass有變數和作用域。
- $variable，like php；
- #｛$variable｝like ruby；
- 變數有全域性和區域性之分，並且有優先順序。
②sass有函式的概念
- @function和@return以及函式引數（還有不定參）可以讓你像js開發那樣封裝你想要的邏輯。
- @mixin類似function但缺少像function的程式設計邏輯，更多的是提高css程式碼段的複用性和模組化，這個用的人也是最多的。
- ruby提供了非常豐富的內建原生api。
③程式控制：
- 條件：@if @else；
- 迴圈遍歷：@for @each @while
- 繼承：@extend
- 引用：@import
④資料結構：
- $list型別=陣列；
- $map型別=object；
其餘的也有string、number、function等型別
- 4、Less與Sass處理機制不一樣
前者是通過客戶端處理的，後者是通過服務端處理，相比較之下前者解析會比後者慢一點
- 5、關於變數在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表示式賦值。
為什麼選擇使用Sass而不是Less？
1、Sass在市面上有一些成熟的框架，比如說Compass，而且有很多框架也在使用Sass，比如說Foundation。
2、就國外討論的熱度來說，Sass絕對優於LESS。
3、就學習教程來說，Sass的教程要優於LESS。在國內LESS集中的教程是LESS中文官網，而Sass的中文教程，慢慢在國內也較為普遍。
4、Sass也是成熟的CSS前處理器之一，而且有一個穩定，強大的團隊在維護。
5、同時還有Scss對sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法相容，只是用{}取代了原來的縮排。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。