Foundation的sass版本

作者: 来源: 更新时间:2013-03-26 11:22:39 点击:

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/