compass用法

来源:互联网 发布:关于网络管理的书 编辑:程序博客网 时间:2024/05/21 21:34

Compass相对于是sass的工具库(toolkit)

一、安装

compass也是Ruby语言开发的,所以安装compass之前也要先安装下Ruby(请参考sass介绍的地址安装ruby);假设你的机器(Linux或OS X)已经安装好Ruby,则要在下面命令行模式中输入:

sudo gem install compass

如果你的机器是Windows系统那么要省略前面的sudo,直接用下面命令(正常情况下compass连同sass就安装好了):

gem install compass

二、项目的初始化

假设你想在你的D盘中创建的项目名是:mingproject;则你要先D盘中;可执行以下代码:

compass create mingproject

然后你可以到D下的mingproject中看到三个文件夹:

1、config.rb 这个文件是项目的配置文件

2、sass 是存放Sass源文件

3、stylesheet是存放编译后的css文件的

三、编译

编译命令

D:\SASS\mingproject>compass compile
运行此命令后会在sass文件中生成.scss文件,在stylesheet中生成.css文件

默认情况下编译成功后的css文件会有大量的注释,但是在生产中是要用压缩后的文件,这时要使用--output-style参数

D:\SASS\mingproject>compass compile --output-style compressed

compass只编译变动过的文件,如果想重新编译未动的文件,则需要使用 --force参数

D:\SASS\mingproject>compass compile --force

当然除了使用命令行之外,我们也可以通过更改配置文件config.rb,来指定更改

output_style = :expanded
:expanded模式表示编译后保留原格式,其他值还包括:nested :compact和:compressed,但是进入生产模式后要改为:compressed模式

output_style = :expanded


在命令模式下,除了一次性编译命令,compass还有自动编译命令

D:\SASS\mingproject>compass watch

运行该命令后只要scss文件发生变化,就会自动编译成.css文件





0 0
原创粉丝点击