compass笔记

一、项目初始化

在命令行键入：compass create myproject

当前目录中就会生成 .sass-cache 、myproject两个子目录。

进入myproject目录，里面有一个config.rb文件，这是项目的配置文件。还有两个子目录sass和stylesheets，前者存放Sass源文件，后者存放编译后的css文件。

接下来，就可以动手写代码了。

二、编译

Compass的编译命令是：compass compile

该命令在项目根目录下运行，会将sass子目录中的scss文件，编译成css文件，保存在stylesheets子目录中。

默认状态下，编译出来的css文件带有大量的注释。但是，生产环境需要压缩后的css文件，这时要使用--output-style参数。

compass compile --output-style compressed

Compass只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用--force参数。

compass compile --force

除了使用命令行参数，还可以在配置文件config.rb中指定编译模式。

output_style = :expanded

:expanded模式表示编译后保留原格式，其他值还包括 :nested、:compact 和 :compressed。进入生产阶段后，就要改为:compressed模式。

output_style = :compressed

也可以通过指定environment的值（:production或者:development），智能判断编译模式。

environment = :development

output_style = (environment == :production) ? :compressed : :expanded

在命令行模式下，除了一次性编译命令，compass还有自动编译命令：compass watch

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

三、Compass的Reset模块

@import "compass";          导入compass模块，默认就导入了css3、helpers、typography、utilities、browser support模块，reset、layout需要单独导入。

通常，编写自己的样式之前，有必要重置浏览器的默认样式。

写法是：@import "compass/reset";

（项目初始化时，sass/screen.scss文件中已经引入了）

四、Compass的CSS3模块

目前，该模块提供21种CSS3命令。支持css的跨浏览器功能。

使用css3命令前要先引入css3模块，写法是：@import "compass/css3";

五、Compass的Layout模块

该模块提供布局功能。

引入：@import "compass/layout";

六、Compass的Typography模块

用来修饰文本样式。

引入：@import "compass/typography";

Links：Tools for styling anchor links.	Hover Link
	Link Colors
	Unstyled Link
Lists：Tools for styling lists.
Text：Style helpers for your text.
Vertical Rhythm：Create and maintain a vertical rhythm for your type.
等等等等，有空了再整理吧

七、Compass的Utilities模块

为常见的样式模式提供了一些基本的 mixin。

引入：@import "compass/utilities";

八、Compass的Helpers函数

九、Compass的Browser Support

引入：@import "compass/support";

css3模块内部已经引入了support模块。如果已经引入了css模块，则不需要再引入support模块。

返回支持的浏览器：browsers()

返回特定浏览器支持的版本：browser-version(chrome)

配置需要支持的浏览器：$supported-browsers: chorme, firefox, ...;（用空格分隔也可以）

配置需要支持的版本：$browser-minimum-versions: ("ie": "8");

十、normalize替换reset

安装normalize插件：

gem install compass-nomalize

在config.rb中引入normalize：require 'compass-normalize'

在scss文件中引入normalize：@import "normalize";