這篇文章主要解答以下幾個問題，供前端開發者的新手參考。

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的比較

不同之處

①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等類型

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

1、混入(Mixins)——class中的class；
2、參數混入——可以傳遞參數的class，就像函數一樣；
3、嵌套規則——Class中嵌套class，從而減少重覆的代碼；
4、運算——CSS中用上數學；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。