大家好，我是IT修真院成都分院第07期學(xué)員，一枚正直善良的web程序員。
一.背景介紹
在我們編寫(xiě)CSS文件樣式時(shí)，
經(jīng)常會(huì)使用到less或者sass這兩種工具，
那么它們是什么?
有什么區(qū)別?
各自又有哪些優(yōu)缺點(diǎn)?
我們?cè)撊绾芜x擇呢？
二.Sass、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一種動(dòng)態(tài)樣式語(yǔ)言，
Sass語(yǔ)法屬于縮排語(yǔ)法，比css比多出好些功能
(如變量、嵌套、運(yùn)算,混入(Mixin)、繼承、顏色處理，函數(shù)等)，更容易閱讀。
Sass的縮排語(yǔ)法，對(duì)于寫(xiě)慣css前端的web開(kāi)發(fā)者來(lái)說(shuō)很不直觀，
也不能將css代碼加入到Sass里面，因此sass語(yǔ)法進(jìn)行了改良，
Sass 3就變成了Scss(sassy css)。與原來(lái)的語(yǔ)法兼容，
只是用{}取代了原來(lái)的縮進(jìn)。
Less也是一種動(dòng)態(tài)樣式語(yǔ)言.
對(duì)CSS賦予了動(dòng)態(tài)語(yǔ)言的特性，
如變量，繼承，運(yùn)算， 函數(shù).
Less 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，
也可在服務(wù)端運(yùn)行 (借助 Node.js)。
三.Sass與Less的區(qū)別
1.編譯環(huán)境不一樣
Sass的安裝需要Ruby環(huán)境，是在服務(wù)端處理的，而Less是需要引入less.js來(lái)處理Less代碼輸出css到瀏覽器，
也可以在開(kāi)發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放到項(xiàng)目中，
也有 Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。
2.變量符不一樣
Less是@，而Scss是$，而且變量的作用域也不一樣。
3.輸出設(shè)置
Less沒(méi)有輸出設(shè)置，Sass提供4中輸出選項(xiàng)：nested, compact, compressed 和 expanded。
輸出樣式的風(fēng)格可以有四種選擇，默認(rèn)為nested
nested：嵌套縮進(jìn)的css代碼
expanded：展開(kāi)的多行css代碼
compact：簡(jiǎn)潔格式的css代碼
compressed：壓縮后的css代碼
4.Sass支持條件語(yǔ)句，可以使用if{},else{},for{}循環(huán)等等。而Less不支持。
5. 引用外部CSS文件
sass引用的外部文件命名必須以_開(kāi)頭。
文件名如果以下劃線_開(kāi)頭的話，Sass會(huì)認(rèn)為該文件是一個(gè)引用文件，不會(huì)將其編譯為css文件。
Less引用外部文件和css中的@import沒(méi)什么差異。
6.Sass和Less的工具庫(kù)不同
Sass有工具庫(kù)Compass, 簡(jiǎn)單說(shuō)，Sass和Compass的關(guān)系有點(diǎn)像Javascript和jQuery的關(guān)系,Compass是Sass的工具庫(kù)。在它的基礎(chǔ)上，封裝了一系列有用的模塊和模板，補(bǔ)充強(qiáng)化了Sass的功能。
Less有UI組件庫(kù)Bootstrap,Bootstrap是web前端開(kāi)發(fā)中一個(gè)比較有名的前端UI組件庫(kù)，Bootstrap的樣式文件部分源碼就是采用Less語(yǔ)法編寫(xiě)。
四. 總結(jié)
不管是Sass，還是Less，
都可以視為一種基于CSS之上的高級(jí)語(yǔ)言，
其目的是使得CSS開(kāi)發(fā)更靈活和更強(qiáng)大，
Sass的功能比Less強(qiáng)大,
基本可以說(shuō)是一種真正的編程語(yǔ)言了，
Less則相對(duì)清晰明了,易于上手,對(duì)編譯環(huán)境要求比較寬松。
考慮到編譯Sass要安裝Ruby,而Ruby官網(wǎng)在國(guó)內(nèi)訪問(wèn)不了,個(gè)人在實(shí)際開(kāi)發(fā)中更傾向于選擇Less，
但也會(huì)去嘗試使用sass，畢竟為以后的工作做準(zhǔn)備。
五.擴(kuò)展思考
處理機(jī)制不一樣會(huì)帶來(lái)什么不同？
因?yàn)長(zhǎng)ess與Sass處理機(jī)制不一樣，
前者是通過(guò)客戶端處理的，
后者是通過(guò)服務(wù)端處理，
相比較之下前者解析js會(huì)比后者慢一點(diǎn)。
六.更多討論
你會(huì)選擇使用什么，為什么？
七.參考資料
1.知乎問(wèn)答。
2..http://www.cnblogs.com/wangpenghui522/p/5467560.html
