foundation的sass版本

##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/