compass的安装及使用，以及常见命令行指令与注意事项、Compass核心模块

1、compass官网：compass-style.org

compass是一个开源的书写框架

正确安装完ruby之后，使用gem install compass安装

1、compass create learn-compass-init:通过compass直接创建一个compass框架项目

2、@import “compass/reset”：compass 内置浏览器重置样式模块

2、补充部分：

@import “compass/reset”的设计思路：reset把对样式的重置封装成了一个又一个的mixin，通过@import "compass/reset/utilities"来引入这些mixin的集合，然后经过调用其中的一个global-reset的mixin来达到和reset一样的重置效果。

简单来说：

@import "compass/reset";等价于

@import "compass/reset/utilities";

@include global-reset;

详情见compass官网http://compass-style.org/reference/compass/reset/utilities/

3、指令部分：

(1)compass watch监听代码变化自动编译到CSS文件

(2)compass compile编译

(3)ompass interactive:进入console状态，调用browsers() ,可以看目前考虑的兼容哪些浏览器

(4)调用browser-versions(chrome)：括号里面传浏览器名字，可以看目前支持的浏览器版本。

(5)compass compile -e production --force

compass默认是development开发模式，这里的指令是将强制覆盖掉开发模式，采用上线模式，由scss文件编译生成的css文件中不在出现调试注释。

上面的DEBUG调试语句是由于在SCSS文件中写了@debug compass-env();

(6) compass compile：进入到项目根目录下运行该命令，该命令会将sass子目录中的scss文件，编译成css文件，保存在stylesheets子目录中。

(7) compass compile --force：Compass只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用–force参数。

4、compass核心模块：http://compass-style.org/reference/compass/layout/

1、Reset模块：浏览器样式重置模块，用来减少不同浏览器之间的差异性。

2、Layout模块：提供页面布局的控制能力，比如，将一个容器中的子元素横向拉伸占满，纵向拉伸占满。

注意：这两个模块均需要单独引入，引入方式如上图。

3、CSS3模块：主要用来提供跨浏览器的CSS3能力。

4、Helpers模块：内含一系列函数，与sass函数列表很像，功能比较强大，不过较少用到。

5、Typography模块：主要用来修饰文本样式。

6、Utilities模块：辅助工具类模块，多是mixin

7、browser模块：用来配置compass默认支持哪些浏览器，对于特定浏览器支持到那个版本，该模块的配置一旦修改将会影响其余六个模块的输出。

4.1使用normalize替换掉compass的reset模块，

(1)在normalize官网，http://necolas.github.io/normalize.css/上Download最新版本，然后放到自己的项目目录，通过import引用

(2)使用包管理工具，npm install normalize.css

(3)使用compass的normalize的插件使用命令行指令“gem install compass-normalize”

这里使用第三种方式：

1.在config.rb中引用插件 require 'compass-normalize'

扩展：

<1>require 'compass/import-once/activate'用来设置，在不同代码位置，重复引用时只需一次即可，避免代码冗余。实在需要重复引用时加上“！”即可，如 @import "compass/reset" xxxxxx "@import "compass/reset!"

<2>config.rb文件中output_style=“expanded or nested compact compressed”：用来设定编译成CSS后代码风格

其中使用compress压缩上线时，会去除掉里面的所有注释，那么可以在注释的最前面加上“！”，避免注释被压缩掉/*!xxxxx*/

4.2Normalize核心模块（八大模块）

1.base模块：用来统一HTML，body 标签的字体，文字大小，边距等。

2.html5模块：用来统一html中新增的元素，如article,aside等。

3.links模块：统一a标签的修饰，去掉hover和active时的边线

4.typography模块：b,strong,everyone,sub下标，sup上标等段落文本修饰

5.Embedded模块：用来统一img,svg

6.Figures:figure,pre,code等

7.Forms:button ,input,select,textarea,optgroup

8.Tables:table,td,th

5、compass的layout模块（使用率最低的一个模块）

其中包括三个小mixin，具体的看官方文本

举例如下：

scss文件：.strech-full{@include stretch;
}
.strech-x{@include stretch-x;
}编译之后：.strech-full {position: absolute;top: 0;bottom: 0;left: 0;right: 0;
}/* line 69, ../sass/screen.scss */
.strech-x {position: absolute;left: 0;right: 0;
}

6、compass的CSS3模块（使用率最高的一个模块）

http://compass-style.org/reference/compass/css3/

7.compass的helpers模块

Compass Selector Helpers下的的叠加选择器

append-selector($selector, $to-append)

This helper function appends any selector with some string. No space or punctuation is added when appending. The selector can be a comma-delimited list of selectors.

append-selector(".foo", ".bar").foo.barappend-selector("p, div, span", ".bar")p.bar, div.bar, span.bar

举例：

/*注意参数个数的不同及书写格式*/
#{append-selector("p,div,span",".bar")}{color:#000;
}
#{nest("p,div,span",".bar")}{color:#000;
}

编译出来的结果：

/*注意参数个数的不同，嵌套和叠加的空格区别及书写格式*/
/* line 106, ../sass/screen.scss */
p.bar, div.bar, span.bar {color: #000;
}/* line 109, ../sass/screen.scss */
p .bar, div .bar, span .bar {color: #000;
}