1什么是sass？

sass是css預處理器的一種，我們也聽說過less，less與sass的最大區別就是，less是基于JavaScript，所以，是在客戶端處理的，Sass是基于Ruby的，所以是在服務器端處理的。

2什么是ruby？

想要支持sass，那必然要先安裝ruby環境，自然先要搞清什么是ruby，不過，我在這里只提一句，它是一種面向對象的編程語言，再準確點是腳本語言，sass就是ruby編寫的，因此要在電腦上安裝ruby環境。

3什么是compass

是基于sass開發的框架，形象的來說就好比js和jquery的關系

4 ruby的安裝

a下載ruby安裝包，地址為http://rubyforge.org/frs/?group_id=167&release_id=47158，選擇最新的支持windows的版本，最新版是2.0.0.0，如果你是個新手，則直接下載exe的

b按照提示進行安裝，唯一要注意的是選擇路徑的下方需要勾選Add Ruby executables to you path這一項，否則你要手動去配置。

5 sass的安裝

在命令行輸入gem install sass,等待片刻即可

6 compass的安裝

在命令行輸入gem install compass

7 zurb-foundation的安裝

現在輪到主角的安裝了，在命令行輸入gem install zurb-foundation即可

如需更新foundation版本，使用gem update zurb-foundation命令

8 建立一個新項目

在命令行輸入cd xx/xx/xx(這里是你要建立項目的路徑)

在相應的路徑下輸入

compass create myprojectname -r zurb-foundation —using foundation 

其中myprojectname為你的項目名稱

9 如果你有一個用compass建立的項目，如何升級到foundation呢

A 找到項目中的config.rb配置文件，在第一行添加require "zurb-foundation"，意思是引用zurb-foundation框架

B 命令行輸入cd xx/xx/xx(這里是進入你的項目路徑)

C 運行compass install foundation

10 來了解一下項目中的文件

.sass-cache文件夾是sass預處理的緩存文件

javascripts文件夾不用多說，存放腳本文件

sass文件夾存放sass源文件

stylesheets文件夾存放編譯好的最終的css文件

config.rb文件是項目的配置文件，主要配置文件路徑

humans.txt這是一個很有趣的文件，沒什么實際意義，主要是人情味的傳播

index.html是一個展示頁

MIT-LICENSE.txt是開發這的一個聲明

robots.txt網站通過robots協議告訴搜索引擎哪些頁面可以抓取，哪些頁面不能抓取

11 sass文件夾中的文件各是什么功能

_settings.scss是全局設置，主要內容是全局變量，默認情況變量都是關閉的，是用//注釋掉了，在頂部@import "foundation/foundation-global";引用了foundation的默認變量值，如需自己定義變量，可把相應變量前的//刪掉，并修改為符合自己的值即可，如果文件中沒有自己想要的變量，可以自行添加。

app.scss是生成框架樣式的文件，主要構成是最頂部@import "settings";引用全局變量文件，往下，@import "foundation";引用框架全部部件，再下，是單獨的各個部件，是用//注釋了，如果你不需要全部的部件，可以把@import "foundation";注釋掉，然后再一一開啟你所想要的各部件。

normalize.scss是樣式初始化的文件

另外要說明的一點，文件中引用的部件樣式源文件都在foundation的安裝目錄下，例如這樣的路徑

C:/Ruby200/lib/ruby/gems/2.0.0/gems/zurb-foundation-4.0.9/scss/foundation/components/_global.scss

12 如何把scss文件編譯成css文件

修改了sass文件夾中的scss文件后，打開命令窗口，在項目的路徑下輸入compass watch，stylesheets文件下相應的css文件會自動更新，你可以在修改scss全部完成之后執行此命令，也可以提前執行此命令，可實時更新。當不需要修改時按ctrl+c，按提示輸入y進行關閉

常用命令

1 cmd

（1）換盤符直接d：,d是你想要的盤符

（2）改變路徑cd sass,路徑就會成為d:/sass>,sass一定要存在

2 sass

（1）查看scss文件：sass style.scss

（2）編譯scss文件：sass style.scss style.css

（3）編譯風格：sass —style compressed style.scss style.css

              其中nested：嵌套縮進的css代碼，默認值

                  expanded：沒有縮進的，擴展的css代碼

                  compact：簡潔格式的css代碼

                  compressed：壓縮后的css代碼

（4）監聽文件：sass —watch style.scss:style.css

（5）監聽不同目錄下的文件：sass —watch xx/sass:xx/style

3 compass

（1）創建項目：compass create projectname

（2）編譯文件：compass compile

（3）編譯為壓縮文件：compass compile —output-style compressed

（4）監聽文件compass watch

資料http://compass-style.org/reference/compass/