1.背景介紹
預(yù)處理器：
CSS預(yù)處理器是一種語(yǔ)言，用來為CSS增加一些編程的的特性偏友，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡(jiǎn)單的程序邏輯享怀、函數(shù)等等在編程語(yǔ)言中的一些基本技巧，可以讓你的CSS更見簡(jiǎn)潔趟咆，適應(yīng)性更強(qiáng)添瓷，代碼更直觀等諸多好處。
我們最常用的預(yù)處理器有scss和less值纱。
2.知識(shí)剖析
sass背景
Sass誕生于2007年鳞贷，最早也是最成熟的一款CSS預(yù)處理器語(yǔ)言。
現(xiàn)在的Sass已經(jīng)有了兩套語(yǔ)法規(guī)則：一個(gè)依舊是用縮進(jìn)作為分隔符來區(qū)分代碼塊的虐唠；另一套規(guī)則和CSS一樣采用了大括號(hào)（｛｝）作為分隔符搀愧。后一種語(yǔ)法規(guī)則又名SCSS，在Sass3之后的版本都支持這種語(yǔ)法規(guī)則。目前我們所稱的sass一般指語(yǔ)法更為嚴(yán)格和友好的scss咱筛。
less背景
2009年開源的一個(gè)項(xiàng)目搓幌，受Sass的影響較大，使用CSS的語(yǔ)法,在很多流行的框架和工具中已經(jīng)能經(jīng)逞嘎幔看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）溉愁。
當(dāng)時(shí)SASS和現(xiàn)在的scss不同，采用了縮進(jìn)作為分隔符來區(qū)分代碼塊饲趋，而不是CSS中廣為使用的大括號(hào)（｛｝）拐揭。為了讓CSS現(xiàn)有的用戶使用起來更加方便，Alexis開發(fā)了LESS并提供了類似CSS的書寫功能奕塑。
3.常見問題
scss和less有什么不同
我們知道scss和less相似堂污，它們都可以使用變量、常量爵川、嵌套敷鸦、混入、繼承等功能寝贡，可以更有效有彈性的寫出CSS扒披，下面我們看看它們之間的差異。
4.解決方案
A安裝
Sass：
sass基于Ruby語(yǔ)言開發(fā)而成圃泡，
因此安裝sass前需要安裝Ruby碟案。
Less：
less直接link引入“.less”文件，再引入less.js文件即可颇蜡。
B變量
sass是以$開頭定義的變量价说，如：
$mainColor: #963;
less是以@開頭定義的變量，如：
@mainColor: #963;
C作用域
sass沒有局部變量风秤，滿足就近原則鳖目。
less中{}內(nèi)定義的變量為局部變量。
作用域和其他程序語(yǔ)言中的作用域非常的相同缤弦，
他首先會(huì)查找局部定義的變量领迈，如果沒有找到，
會(huì)像冒泡一樣碍沐，一級(jí)一級(jí)往下查找狸捅，直到根為止，
D混合（Mixins）
Sass的混合：
sass樣式中聲明Mixins時(shí)需要使用“@mixin”命令累提，
在選擇器調(diào)用定義好的Mixins需要使用“@include”尘喝。
/*聲明一個(gè)Mixin叫作“abc”*/
@mixin abc($bg-c:red){
width: 100px;
height:100px;
background-color: $bg-c;
}
/*調(diào)用abc Mixins*/
.a{
@include abc();
}
.b{
/*將參數(shù)$bg-c的值重定義為blue*/
@include abc(blue);
}
less的混合：
在less中，混合是指將定義好的“ClassA”中引入另一個(gè)已經(jīng)定義的“Class”斋陪，就像在當(dāng)前的“Class”中增加一個(gè)屬性一樣朽褪。
/*聲明一個(gè)Mixin叫作“abc”*/
.abc($bg-c:red){
width: 100px;
height:100px;
background-color: $bg-c;
}
/*調(diào)用abc Mixins*/
.a{
.abc();
}
.b{
/*將參數(shù)$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高級(jí)語(yǔ)言
sass對(duì)條件語(yǔ)句和循環(huán)語(yǔ)句的處理要比less語(yǔ)言強(qiáng)大置吓。具有真正的語(yǔ)言處理能力。
6.擴(kuò)展思考
A還有什么好的預(yù)處理器語(yǔ)言缔赠？
stylus交洗，2010年產(chǎn)生于Node.js社區(qū),可同時(shí)使用縮進(jìn)和括號(hào)寫法，寫法非常靈活橡淑，擴(kuò)展性與scss相當(dāng)，高于less咆爽，但由于規(guī)定過少梁棠，可能容易讓人混亂。
B我該如何選擇css預(yù)處理器?
1斗埂，Sass誕生是最早也是最成熟的CSS預(yù)處理器符糊，有Ruby社區(qū)和Compass支持；Stylus早期服務(wù)于Node JS項(xiàng)目呛凶，在該社區(qū)得到一定支持者男娄；LESS出現(xiàn)于2009年，支持者遠(yuǎn)超于Ruby和Node JS社區(qū)漾稀；
2模闲，sass和stylus擴(kuò)展性更強(qiáng)，sass廣泛使用于國(guó)外崭捍，less在國(guó)內(nèi)受眾最多尸折。stylus是后起之秀。
3殷蛇，Sass和LESS語(yǔ)法較為嚴(yán)謹(jǐn)实夹、嚴(yán)密，而Stylus語(yǔ)法相對(duì)散漫粒梦，其中LESS學(xué)習(xí)起來更快一些亮航，因?yàn)樗馛SS的標(biāo)準(zhǔn)；
4匀们，sass和LESS相互影響較大缴淋，其中Sass受LESS影響，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS昼蛀；
5宴猾，Sass和LESS都有第三方工具提供轉(zhuǎn)譯，特別是Sass和Compass是絕配叼旋；
7.參考文獻(xiàn)
參考一：CSS預(yù)處理器——Sass仇哆、LESS和Stylus實(shí)踐
參考二：SASS用法指南
參考三：為您詳細(xì)比較三個(gè)CSS預(yù)處理器（框架）：Sass、LESS和Stylus
參考四：Less中文網(wǎng)
