一、Sass、LESS和Stylus的安裝
1.Sass的安裝
Sass是Ruby語言寫的，但是兩者的語法沒有關係。不懂Ruby，照樣可以正常使用Sass。只是必須先安裝Ruby，然後再安裝Sass。首先安裝Ruby，如果你使用的是IOS系統，那麼你的系統已經安裝好了Ruby。如果你使用的是微軟的Windows系統，那麼安裝就有些許的麻煩。不過也不用過於擔心，按照下面的步驟就能幫你快速的安裝好。
- 到RubyInstaller官網上下載Ruby安裝文件（隨意選擇一個版本），此處選擇的是最新版本Ruby1.9.3-p385：
- Ruby安裝文件下載好後，可以按應用軟件安裝步驟進行安裝Ruby。在安裝過程中，個人建議將其安裝在C盤下，在安裝過程中選擇第二個選項，如下圖所示：
- Ruby安裝完成後，在開始菜單中找到新安裝的Ruby，並啓動Ruby的Command控制面板，如下圖所示：
- 在啓動的Ruby命令控制面板中輸入下面的命令：
gem install sass - 輸入上面命令，回車後就會自動安裝Sass：
這樣Sass就安裝成功了，也就可以使用了。
2.LESS的安裝
LESS的安裝和Sass安裝有所不同，他不需要依賴於Ruby環境，就能直接安裝使用。不過LESS安裝分爲兩種：客戶端和服務器端安裝。
a)客戶端安裝：
我們可以直接在客戶端使用“.less”（LESS源文件），只需要在官網載一個Javascript腳本文件主“less.js”，然後在我們需要引入LESS源文件的HTML的<head>中加入如下代碼：
<link rel="stylesheet/less" type="text/css" href="文件路徑/styles.less">
<script src="文件路徑/less.js" type="text/javascript"></script>需要注意的是：在引入“.less”文件中，“link”的“rel”屬性要設置爲“stylesheet/less”。還有更重要的一點需要注意的是：LESS源文件一定要在“less.js”引入之前引入，這樣才能保證LESS源文件正確編譯解析。
b)服務器端安裝
LESS在服務器端的使用主要是藉助於LESS的編譯器，將LESS源文件編譯生成最終的CSS文件，目前常用的方式是利用node的包管理器（npm）安裝LESS，安裝成功後就可以在Node環境中對LESS文件進行編譯。如此一來，LESS在服務器的安裝和Sass的安裝有點相似，不同之處是他們需依賴的環境不一樣，LESS需要的是Node JS環境，而Sass需要的是Ruby環境，爲了讓大家能更清晰的知道如何在服務器端安裝LESS，此處簡單的過一下安裝過程（本文演示的是在Window7下的安裝方法）。
- 首先到Node Js的官網下載一個適合Windows系統的安裝文件，此處下載的是“node-v0.8.20-x86.msi”：
- 安裝文件下載後，按正常應用程序方法一樣安裝。安裝完成後在開始菜單中啓用Node js的Command控制面板：
- 在啓動的Node Js的Command控制面板直接輸入下面的命令：
npm install less
- 這樣就安裝完LESS的編譯命令，可以在本地正常編譯LESS源文件。如果您想下載最新穩定版本的LESS，還可以嘗試在Node JS的Command控制面板輸入：
npm install less@latest
3.Stylus的安裝
Stylus的安裝和LESS在服務器端的安裝很相似，同樣依賴於Node JS的環境，也就是說也要先安裝Node Js（如果安裝Node JS請參考前面的介紹）。唯一不同的是在Node JS的Command控制面板輸入的命令不一樣：npm install stylus
然後，就會自動下載安裝最新的stylus庫：
這樣就算是安裝完Stylus了，也可以正常使用Stylus。
二、Sass、LESS和Stylus轉譯成CSS
Sass、LESS和Stylus源文件（除了LESS源文件在客戶端下運行之外）都不能直接被瀏覽器直接識別，這樣一來，要正常的使用這些源文件，就需要將其源文件轉譯成瀏覽器可以識別的CSS樣式文件，這也是使用CSS預處理器很關鍵的一步，如果這一步不知道如何操作，那麼意味着寫出來的代碼不可用。接下來按同樣的方式，分別來看看三者之間是如何將其源文件轉譯成所需要的CSS樣式文件。
1.Sass源文件轉譯成CSS文件
Sass文件就是普通的文本文件，不過其文件後綴名有兩種，一種爲“.sass”；另一種爲“.scss”。我們一般用“.scss”就好，至於這兩種文件擴展名的區別在於“.sass”是Sass語言文件的擴展後綴名，而“.scss”是SCSS語言文件的擴展後綴名，至於Sass和SCSS的詳細區別這裏不做介紹。你可以簡單的理解爲他們都是CSS預處理器語言，而且兩者功能特性都一樣，只是書寫規則不同而以。
- 要轉譯Sass文件的前提是有文件可轉，因此先在項目中創建一個Sass文件，此例中將其命名爲“style.scss”，並且將其放在對應的項目樣式中，如D盤的“www/workspace/Sass/css”目錄下。
- 啓動Ruby的Command控制面板，找到需要轉譯的Sass文件，如此例此文件放置在D盤的“www/workspace/Sass/css”目錄下：
- 如果僅針對於單文件的轉譯，需要將“style.scss”轉譯成“style.css”，只需要在對應的目錄下輸入下面的命令：
sass style.scss style.css - 這樣原本在D盤的“www/workspace/Sass/css”目錄下只有“style.scss”這個文件，現在增加了一個“style.css”文件，而這個CSS文件我們就可以用來調用，他也就是“style.scss”轉譯出來的樣式文件。當然，我們不可能每保存一次這個Sass文件就來執行一回這個轉譯命令。那麼有沒有更好的辦法實現呢？回答是肯定的，可以通過下面的監聽命令實現，這樣一來只要Sass文件做了修改，就會自動更新對應的CSS樣式文件。
- 單文件的監聽，只需要在剛纔的命令控制面板中輸入：
sass --watch style.scss:style.css - 按下回車鍵（Enter）,就會看到下面的提示信息：
- 看到上圖所示的提示信息就表示監聽成功，這樣一來，你只要修改了“style.scss”文件，“style.css”文件就會隨着更新變化。
- 對於一個項目而言，不太可能只有一個CSS樣式文件，如果有多個Sass文件需要監聽時，就很有必要的組織一下。默認情況之下，我喜歡把所有的Sass文件放在“/css/sass”目錄中，而生成的CSS文件則直接放在“/css”目錄下。現在我們修改一下項目文件目錄結構，在“/css”目錄中再創建一個“sass”目錄，並找剛纔創建的“style.scss”文件移至“/css/sass”目錄下。此時監聽“css/sass”下的所有Sass文件時，可以在命令面板中輸入如下格式的命令：
sass --watch sassFileDirectory:cssFileDirectory - 在本例中，冒號前面的“sassFileDirectory”是指“/css/sass”下的“sass”目錄，冒號後面的“cssFileDirectory”是指“css”目錄，對應的命令就是：
sass --watch css/sass:css - 回車後，同樣可以得到提示信息：
- 除了使用Ruby的Command控制面板轉譯Sass之外還可以考慮第三方工具，比如說有名的Compass.app和fire.app。
2.LESS文件的轉譯成CSS文件
LESS文件的轉譯和Sass文件轉譯可以說是大同小異，不同之處是LESS在安裝的Node JS環境下通過其自己的命令來進行轉譯。
lessc style.less
上面的命令會將編譯的CSS傳遞給stdout，你可以將它保存到一個文件中：lessc style.less > style.css
除了上面的命令轉譯LESS源文件之外，現在還有很多第三方開發的工具，例如koloa,koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。具體使用可以參考官網：http://koala-app.com/
3.Stylus源文件轉譯成CSS文件
- Stylus具有可執行性，因此Stylus能將自身轉換成CSS。Stylus可以讀取自“stdin”輸出到“stdout”，因此Stylus可以像下面轉譯源文件：
stylus –compress <some.styl> some.css - Stylus也像Sass一樣，同時接受單個文件和整個目錄的轉譯。例如，一個目錄名爲“css”將在同一個目錄編譯並輸出“.css”文件。
stylus css - 下面的命令將輸出到“./public/stylesheets”：
stylus css –out public/stylesheets - 還可以同時轉譯多個文件：
stylus one.styl two.styl - 如果你的瀏覽器安裝了Firebug，那麼可以使用FireStylus擴展。
stylus –firebug <path>