摘要：上面的命令會(huì)將編譯的傳遞給，你可以將它保存到一個(gè)文件中除了上面的命令轉(zhuǎn)譯源文件之外，現(xiàn)在還有很多第三方開發(fā)的工具，例如是一個(gè)前端預(yù)處理器語言圖形編譯工具，支持，幫助開發(fā)者更高效地使用它們進(jìn)行開發(fā)。

Sass是Ruby語言寫的，但是兩者的語法沒有關(guān)系。不懂Ruby，照樣可以正常使用Sass。只是必須先安裝Ruby，然后再安裝Sass。首先安裝Ruby，如果你使用的是IOS系統(tǒng)，那么你的系統(tǒng)已經(jīng)安裝好了Ruby。如果你使用的是微軟的Windows系統(tǒng)，那么安裝就有些許的麻煩。不過也不用過于擔(dān)心，按照下面的步驟就能幫你快速的安裝好。

到RubyInstaller官網(wǎng)上下載Ruby安裝文件（隨意選擇一個(gè)版本），此處選擇的是最新版本Ruby1.9.3-p385：

Ruby安裝文件下載好后，可以按應(yīng)用軟件安裝步驟進(jìn)行安裝Ruby。在安裝過程中，個(gè)人建議將其安裝在C盤下，在安裝過程中選擇第二個(gè)選項(xiàng)，如下圖所示：

Ruby安裝完成后，在開始菜單中找到新安裝的Ruby，并啟動(dòng)Ruby的Command控制面板，如下圖所示：

在啟動(dòng)的Ruby命令控制面板中輸入下面的命令：gem install sass

輸入上面命令，回車后就會(huì)自動(dòng)安裝Sass：

這樣Sass就安裝成功了，也就可以使用了。

LESS的安裝和Sass安裝有所不同，他不需要依賴于Ruby環(huán)境，就能直接安裝使用。不過LESS安裝分為兩種：客戶端和服務(wù)器端安裝。

我們可以直接在客戶端使用“.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源文件正確編譯解析。

LESS在服務(wù)器端的使用主要是借助于LESS的編譯器，將LESS源文件編譯生成最終的CSS文件，目前常用的方式是利用node的包管理器（npm）安裝LESS，安裝成功后就可以在Node環(huán)境中對(duì)LESS文件進(jìn)行編譯。如此一來，LESS在服務(wù)器的安裝和Sass的安裝有點(diǎn)相似，不同之處是他們需依賴的環(huán)境不一樣，LESS需要的是Node JS環(huán)境，而Sass需要的是Ruby環(huán)境，為了讓大家能更清晰的知道如何在服務(wù)器端安裝LESS，此處簡(jiǎn)單的過一下安裝過程（本文演示的是在Window7下的安裝方法）。

首先到Node Js的官網(wǎng)下載一個(gè)適合Windows系統(tǒng)的安裝文件，此處下載的是“node-v0.8.20-x86.msi”：

安裝文件下載后，按正常應(yīng)用程序方法一樣安裝。安裝完成后在開始菜單中啟用Node js的Command控制面板：

在啟動(dòng)的Node Js的Command控制面板直接輸入下面的命令：npm install less

這樣就安裝完LESS的編譯命令，可以在本地正常編譯LESS源文件。如果您想下載最新穩(wěn)定版本的LESS，還可以嘗試在Node JS的Command控制面板輸入：npm install less@latest

Stylus的安裝和LESS在服務(wù)器端的安裝很相似，同樣依賴于Node JS的環(huán)境，也就是說也要先安裝Node Js（如果安裝Node JS請(qǐng)參考前面的介紹）。唯一不同的是在Node JS的Command控制面板輸入的命令不一樣：npm install stylus 
然后，就會(huì)自動(dòng)下載安裝最新的stylus庫：

這樣就算是安裝完Stylus了，也可以正常使用Stylus。

Sass、LESS和Stylus源文件（除了LESS源文件在客戶端下運(yùn)行之外）都不能直接被瀏覽器直接識(shí)別，這樣一來，要正常的使用這些源文件，就需要將其源文件轉(zhuǎn)譯成瀏覽器可以識(shí)別的CSS樣式文件，這也是使用CSS預(yù)處理器很關(guān)鍵的一步，如果這一步不知道如何操作，那么意味著寫出來的代碼不可用。接下來按同樣的方式，分別來看看三者之間是如何將其源文件轉(zhuǎn)譯成所需要的CSS樣式文件。

Sass文件就是普通的文本文件，不過其文件后綴名有兩種，一種為“.sass”；另一種為“.scss”。我們一般用“.scss”就好，至于這兩種文件擴(kuò)展名的區(qū)別在于“.sass”是Sass語言文件的擴(kuò)展后綴名，而“.scss”是SCSS語言文件的擴(kuò)展后綴名，至于Sass和SCSS的詳細(xì)區(qū)別這里不做介紹。你可以簡(jiǎn)單的理解為他們都是CSS預(yù)處理器語言，而且兩者功能特性都一樣，只是書寫規(guī)則不同而以。

要轉(zhuǎn)譯Sass文件的前提是有文件可轉(zhuǎn)，因此先在項(xiàng)目中創(chuàng)建一個(gè)Sass文件，此例中將其命名為“style.scss”，并且將其放在對(duì)應(yīng)的項(xiàng)目樣式中，如D盤的“www/workspace/Sass/css”目錄下。

啟動(dòng)Ruby的Command控制面板，找到需要轉(zhuǎn)譯的Sass文件，如此例此文件放置在D盤的“www/workspace/Sass/css”目錄下：

如果僅針對(duì)于單文件的轉(zhuǎn)譯，需要將“style.scss”轉(zhuǎn)譯成“style.css”，只需要在對(duì)應(yīng)的目錄下輸入下面的命令：sass style.scss style.css

這樣原本在D盤的“www/workspace/Sass/css”目錄下只有“style.scss”這個(gè)文件，現(xiàn)在增加了一個(gè)“style.css”文件，而這個(gè)CSS文件我們就可以用來調(diào)用，他也就是“style.scss”轉(zhuǎn)譯出來的樣式文件。當(dāng)然，我們不可能每保存一次這個(gè)Sass文件就來執(zhí)行一回這個(gè)轉(zhuǎn)譯命令。那么有沒有更好的辦法實(shí)現(xiàn)呢？回答是肯定的，可以通過下面的監(jiān)聽命令實(shí)現(xiàn)，這樣一來只要Sass文件做了修改，就會(huì)自動(dòng)更新對(duì)應(yīng)的CSS樣式文件。

單文件的監(jiān)聽，只需要在剛才的命令控制面板中輸入：sass --watch style.scss:style.css

按下回車鍵（Enter）,就會(huì)看到下面的提示信息：

看到上圖所示的提示信息就表示監(jiān)聽成功，這樣一來，你只要修改了“style.scss”文件，“style.css”文件就會(huì)隨著更新變化。

對(duì)于一個(gè)項(xiàng)目而言，不太可能只有一個(gè)CSS樣式文件，如果有多個(gè)Sass文件需要監(jiān)聽時(shí)，就很有必要的組織一下。默認(rèn)情況之下，我喜歡把所有的Sass文件放在“/css/sass”目錄中，而生成的CSS文件則直接放在“/css”目錄下。現(xiàn)在我們修改一下項(xiàng)目文件目錄結(jié)構(gòu)，在“/css”目錄中再創(chuàng)建一個(gè)“sass”目錄，并找剛才創(chuàng)建的“style.scss”文件移至“/css/sass”目錄下。此時(shí)監(jiān)聽“css/sass”下的所有Sass文件時(shí)，可以在命令面板中輸入如下格式的命令：sass --watch sassFileDirectory:cssFileDirectory

在本例中，冒號(hào)前面的“sassFileDirectory”是指“/css/sass”下的“sass”目錄，冒號(hào)后面的“cssFileDirectory”是指“css”目錄，對(duì)應(yīng)的命令就是：sass --watch css/sass:css

回車后，同樣可以得到提示信息：

除了使用Ruby的Command控制面板轉(zhuǎn)譯Sass之外還可以考慮第三方工具，比如說有名的Compass.app和fire.app。

LESS文件的轉(zhuǎn)譯和Sass文件轉(zhuǎn)譯可以說是大同小異，不同之處是LESS在安裝的Node JS環(huán)境下通過其自己的命令來進(jìn)行轉(zhuǎn)譯。

lessc style.less
上面的命令會(huì)將編譯的CSS傳遞給stdout，你可以將它保存到一個(gè)文件中：
lessc style.less > style.css
除了上面的命令轉(zhuǎn)譯LESS源文件之外，現(xiàn)在還有很多第三方開發(fā)的工具，例如koloa,koala是一個(gè)前端預(yù)處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發(fā)者更高效地使用它們進(jìn)行開發(fā)。跨平臺(tái)運(yùn)行，完美兼容windows、linux、mac。具體使用可以參考官網(wǎng)：http://koala-app.com/

Stylus具有可執(zhí)行性，因此Stylus能將自身轉(zhuǎn)換成CSS。Stylus可以讀取自“stdin”輸出到“stdout”，因此Stylus可以像下面轉(zhuǎn)譯源文件：
stylus –compress some.css

Stylus也像Sass一樣，同時(shí)接受單個(gè)文件和整個(gè)目錄的轉(zhuǎn)譯。例如，一個(gè)目錄名為“css”將在同一個(gè)目錄編譯并輸出“.css”文件。
stylus css

下面的命令將輸出到“./public/stylesheets”：
stylus css –out public/stylesheets

還可以同時(shí)轉(zhuǎn)譯多個(gè)文件：
stylus one.styl two.styl

如果你的瀏覽器安裝了Firebug，那么可以使用FireStylus擴(kuò)展。
stylus –firebug

如果你覺得這篇文章對(duì)你有所幫助，那就順便點(diǎn)個(gè)贊吧，點(diǎn)點(diǎn)關(guān)注不迷路~

黑芝麻哇，白芝麻發(fā)，黑芝麻白芝麻哇發(fā)哈！

前端哇發(fā)哈