1.背景介紹

前處理器：

CSS前處理器是一種語言，用來為CSS增加一些程式設計的的特性，無需考慮瀏覽器的相容性問題，例如你可以在CSS中使用變數、簡單的程式邏輯、函式等等在程式語言中的一些基本技巧，可以讓你的CSS更見簡潔，適應性更強，程式碼更直觀等諸多好處。

我們最常用的前處理器有scss和less。

2.知識剖析

sass背景

Sass誕生於2007年，最早也是最成熟的一款CSS前處理器語言。

現在的Sass已經有了兩套語法規則：一個依舊是用縮排作為分隔符來區分程式碼塊的；另一套規則和CSS一樣採用了大括號（｛｝）作為分隔符。後一種語法規則又名SCSS，在Sass3之後的版本都支援這種語法規則。目前我們所稱的sass一般指語法更為嚴格和友好的scss。

less背景

2009年開源的一個專案，受Sass的影響較大，使用CSS的語法,在很多流行的框架和工具中已經能經常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。

當時SASS和現在的scss不同，採用了縮排作為分隔符來區分程式碼塊，而不是CSS中廣為使用的大括號（｛｝）。為了讓CSS現有的使用者使用起來更加方便，Alexis開發了LESS並提供了類似CSS的書寫功能。

3.常見問題

scss和less有什麼不同

我們知道scss和less相似，它們都可以使用變數、常量、巢狀、混入、繼承等功能，可以更有效有彈性的寫出CSS，下面我們看看它們之間的差異。

4.解決方案

A安裝

Sass：

sass基於Ruby語言開發而成，

因此安裝sass前需要安裝Ruby。

Less：

less直接link引入“.less”檔案，再引入less.js檔案即可。

B變數

sass是以$開頭定義的變數，如：

$mainColor: #963;

less是以@開頭定義的變數，如：

@mainColor: #963;

C作用域

sass沒有區域性變數，滿足就近原則。

less中{}內定義的變數為區域性變數。

作用域和其他程式語言中的作用域非常的相同，

他首先會查詢區域性定義的變數，如果沒有找到，

會像冒泡一樣，一級一級往下查詢，直到根為止，

D混合（Mixins）

Sass的混合：

sass樣式中宣告Mixins時需要使用“@mixin”命令，

在選擇器呼叫定義好的Mixins需要使用“@include”。

/*宣告一個Mixin叫作“abc”*/

@mixin abc($bg-c:red){

width: 100px;

height:100px;

background-color: $bg-c;

}

/*呼叫abc Mixins*/

.a{

@include abc();

}

.b{

/*將引數$bg-c的值重定義為blue*/

@include abc(blue);

}

less的混合：

在less中，混合是指將定義好的“ClassA”中引入另一個已經定義的“Class”，就像在當前的“Class”中增加一個屬性一樣。

/*宣告一個Mixin叫作“abc”*/

.abc($bg-c:red){

width: 100px;

height:100px;

background-color: $bg-c;

}

/*呼叫abc Mixins*/

.a{

.abc();

}

.b{

/*將引數$bg-c的值重定義為blue*/

.abc(blue);

}

兩者編譯出的值相同：

.a{

width: 100px;

height:100px;

background-color: red;

}

.b{

width: 100px;

height: 100px;

background-color: blue;

}

E巢狀

兩則寫法相同：

section {

margin:10px;

nav {

height:25px;

a {

color:#0982c1;

&:hover {

text-decoration:underline;

}

}

}

}

F繼承

/*sass的繼承：@extend*/

.block {

margin: 10px 5px;

padding: 2px;

}

p {

@extend .block;/*繼承.block選擇器下所有樣式*/

border: 1px solid #eee;

}

ul,ol {

@extend .block; /*繼承.block選擇器下所有樣式*/

color: #333;

text-transform: uppercase;

}

/*less的繼承：類似於mixins*/

.block {

margin: 10px 5px;

padding: 2px;

}

p {

.block;/*繼承.block選擇器下所有樣式*/

border: 1px solid #eee;

}

ul,ol {

.block; /*繼承.block選擇器下所有樣式*/

color: #333;

text-transform: uppercase;

}

編譯後：

//sass

.block,p,ul,ol {

margin: 10px 5px;

padding:2px;

}

p {

border: 1px solid #eee

}

ul,ol {

color:#333;

text-transform:uppercase;

}

//less

.block {

margin: 10px 5px;

padding:2px;

}

p {

margin: 10px 5px;

padding:2px;

border: 1px solid #eee

}

ul,ol {

margin: 10px 5px;

padding:2px;

color:#333;

text-transform:uppercase;

}

G高階語言

sass對條件語句和迴圈語句的處理要比less語言強大。具有真正的語言處理能力。

6.擴充套件思考

A還有什麼好的前處理器語言？

stylus，2010年產生於Node.js社群,可同時使用縮排和括號寫法，寫法非常靈活，擴充套件性與scss相當，高於less，但由於規定過少，可能容易讓人混亂。

B我該如何選擇css前處理器?

1，Sass誕生是最早也是最成熟的CSS前處理器，有Ruby社群和Compass支援；Stylus早期服務於Node JS專案，在該社群得到一定支持者；LESS出現於2009年，支持者遠超於Ruby和Node JS社群；

2，sass和stylus擴充套件性更強，sass廣泛使用於國外，less在國內受眾最多。stylus是後起之秀。

3，Sass和LESS語法較為嚴謹、嚴密，而Stylus語法相對散漫，其中LESS學習起來更快一些，因為他更像CSS的標準；

4，sass和LESS相互影響較大，其中Sass受LESS影響，已經進化到了全面相容CSS的SCSS；

5，Sass和LESS都有第三方工具提供轉譯，特別是Sass和Compass是絕配；

7.參考文獻