1.背景介紹
CSS 是一門非程序式語(yǔ)言，沒(méi)有變量、函數(shù)、SCOPE（作用域），需要書寫大量看似沒(méi)有邏輯的代碼，不方便維護(hù)及擴(kuò) 展，不利于復(fù)用，尤其對(duì)于非前端開(kāi)發(fā)工程師來(lái)講，往往會(huì)因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼。為了方便前端開(kāi)發(fā)的工作量，出現(xiàn)了sass和less.
2.知識(shí)解剖
Sass背景介紹
Sass是對(duì)CSS（層疊樣式表）的語(yǔ)法的一種擴(kuò)充，誕生于2007年，最早也是最成熟的一款CSS預(yù)處理器語(yǔ)言，它 可以使用變量、常量、嵌套、混 入、函數(shù)等功能，可以更有效有彈性的寫出CSS。Sass最后還是會(huì)編譯出合法 的CSS讓瀏覽器使用，也就是說(shuō)它本身的語(yǔ)法并不太容易讓瀏覽器識(shí)別，因?yàn)?它不是標(biāo)準(zhǔn)的CSS格式，在它的 語(yǔ)法內(nèi)部可以使用動(dòng)態(tài)變量等，所以它更像一種極簡(jiǎn)單的動(dòng)態(tài)語(yǔ)言。 其實(shí)現(xiàn)在的Sass已經(jīng)有了兩套語(yǔ)法規(guī)則：一個(gè)依舊是用縮進(jìn)作為分隔符來(lái)區(qū)分代碼塊的；另一套規(guī)則和CSS一 樣采用了大括號(hào)（｛｝）作為分隔符。后一種語(yǔ)法規(guī)則又名SCSS，在Sass3之后的版本都支持這種語(yǔ)法規(guī)則。
SASS是什么？
Sass（Syntactically Awesome Style Sheets）是一個(gè)相對(duì)新的編程語(yǔ)言，Sass為web前端開(kāi)發(fā)而生，可以用它來(lái)定 義一套新的語(yǔ)法規(guī)則和函數(shù)，以加強(qiáng)和提升CSS。通過(guò)這種新的編程語(yǔ)言，你可以使用最高效的方式，以少量的代 碼創(chuàng)建復(fù)雜的設(shè)計(jì)。它改進(jìn)并增強(qiáng)了CSS的能力，增加了變量，局部和函數(shù)這些特性。而這只使Sass一部分利器！
SASS的安裝
SASS是Ruby語(yǔ)言寫的，但是兩者的語(yǔ)法沒(méi)有關(guān)系。不懂Ruby，照樣使用。只是必須先安裝Ruby，然后再安裝SASS。
在系統(tǒng)上運(yùn)行來(lái)安裝Ruby。添加Ruby的bin文件夾到PATH用戶變量和系統(tǒng)變量以使用 gem 命令工作，第二個(gè)和第三個(gè)框去要打勾。
在系統(tǒng)中打開(kāi)命令提示符，然后輸入以下命令行
gem source -ahttp://rubygems.org/
gem sources -ahttp://ruby.taobao.org/
gem install sass
出現(xiàn)屏幕下方信息，表示SASS 安裝成功，(國(guó)內(nèi)線路不穩(wěn)定，需要多試幾次)。
SASS使用-文件明后綴
sass有兩種后綴名文件：一種后綴名為sass，不使用大括號(hào)和分號(hào)；另一種就是我們這里使用的scss文件，這種和 我們平時(shí)寫的css文件格式差不多，使用大括號(hào)和分號(hào)。而本教程中所說(shuō)的所有sass文件都指后綴名為scss的文件。 在此也建議使用后綴名為scss的文件，以避免sass后綴名的嚴(yán)格格式要求報(bào)錯(cuò)。
sass的導(dǎo)入
sass的導(dǎo)入(@import)規(guī)則和CSS的有所不同，編譯時(shí)會(huì)將@import的scss文件合并進(jìn)來(lái)只生成一個(gè)CSS文件。但是如 果你在sass文件中導(dǎo)入css文件如@import 'reset.css'，那效果跟普通CSS導(dǎo)入樣式文件一樣，導(dǎo)入的css文件不會(huì) 合并到編譯后的文件中，而是以@import方式存在。 所有的sass導(dǎo)入文件都可以忽略后綴名.scss。一般來(lái)說(shuō)基礎(chǔ)的文件命名方法以_開(kāi)頭，如_mixin.scss。這種文件在 導(dǎo)入的時(shí)候可以不寫下劃線，可寫成@import "mixin"
sass的導(dǎo)入
sass的注釋
LESS的背景介紹
（2009年開(kāi)源的一個(gè)項(xiàng)目，受Sass的影響較大，但又使用CSS的語(yǔ)法，讓大部分開(kāi)發(fā)者和設(shè)計(jì)師更容易上手。LESS提供了 多種方式能平滑的將寫好的代碼轉(zhuǎn)化成標(biāo)準(zhǔn)的CSS代碼。
LESS的介紹
第一個(gè)，less是單獨(dú)的一種文件，可以理解為css的升級(jí)版，完全按照css寫也沒(méi)問(wèn)題，不過(guò)它提供了很多便利的東 西， 可以省好多代碼量。第二個(gè)，html只認(rèn)css,所以需要配套一些軟件將less解析成css,引用時(shí)候，直接引用css 就好。gulp,koala 都是常用的，Koala好像簡(jiǎn)單且方便一點(diǎn)。 多種方式能平滑的將寫好的代碼轉(zhuǎn)化成標(biāo)準(zhǔn)的CSS代碼。
LESS的安裝
LESS的安裝和Sass安裝有所不同，他不需要依賴于Ruby環(huán)境，就能直接安裝使用。不過(guò)LESS安裝分為兩種：客戶端和 服務(wù)器端安裝。
less客戶端安裝
我們可以直接在客戶端使用“.less”（LESS源文件），只需要在官網(wǎng)載一個(gè)Javascript腳本文件主“l(fā)ess.js”，然后 在我們需要引入LESS源文件的HTML的中加入如下代碼。
需要注意的是：在引入“.less”文件中，“l(fā)ink”的“rel”屬性要設(shè)置為“stylesheet/less”。還有更重要的一 點(diǎn)需要注意的是：LESS源文件一定要在“l(fā)ess.js”引入之前引入，這樣才能保證LESS源文件正確編譯解析。到這里就已經(jīng)安裝好了。
less的使用
使用less，css文件的后綴名需要改為.less在html頁(yè)面中加入下面代碼。
less定義變量
less樣式嵌套
less嵌套規(guī)則
名稱更為簡(jiǎn)短，并修改時(shí)易查找。
less樣式的傳參
4.常見(jiàn)問(wèn)題
SASS/SCSS、LESS有什么區(qū)別?
4.解析問(wèn)題
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文件。
scss引用的外部文件命名必須以_開(kāi)頭, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分別設(shè)置 的h1 h2 h3。文件名如果以下劃線_開(kāi)頭的話，Sass會(huì)認(rèn)為該文件是一個(gè)引用文件，不會(huì)將其編譯為css文件。
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ǔ)法編寫。
5.參考文獻(xiàn)
參考一：SASS入門教程及用法指南
參考二：深入理解CSS塊級(jí)(block)元素和內(nèi)聯(lián)(inline)元素
參考四：sass、less和stylus的安裝使用和入門實(shí)踐
參考五：sass語(yǔ)法
參考六：less的一些用法整理
參考七：LESS使用簡(jiǎn)介
