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/