sass类库compass学习

概述：

compass -- 是ruby的一个基础库（toolkit）,compass依赖于sass
sass本身只是一个编译器，compass在它基础上，封装了一系列有用的模版和模块，补充sass的功能。
它们关系类似 ： javascript和query，ruby和rails，python和Django的关系

官方定义：
Compass样式表创作框架帮助您构建和维护样式表，并使您能够轻松使用他人提供的样式表库。
The Compass Stylesheet Authoring Framework helps you build and maintain your stylesheets and makes it easy for you to use stylesheet libraries provided by others.

指令

在sass项目文件夹目录下，命令行输入

compass compile
会在这个层级下，新建一个stylesheets文件夹存放转化完成的css，css文件名同scss文件名相同

compass watch --force
强制重新编译未变动的文件

compass compile -e production --force
生产模式，消除调试信息＋压缩代码，最好带上force强制编译下

compass compile --output-style compressed
效果同上，只不过将样式风格暴露了
--output-style STYLE 可以简写为 -s (作用：Select a CSS output mode.)
可以选择一种编译模式：

1. nested  --  格式缩进，使其有视觉层次感
2. expanded  --  常规的格式排版
3. compact  --  每个独立元素样式单独一行，不回车
4. compressed  --  全部压缩一行

compass功能模块

compass由几个功能模块组成，
通过引入模块，可以调用其功能函数

• reset*
• css3*
• layout*
• typography*
• utilities*

reset模块
reset是元素样式初始化模块

@import "compass/reset";

引入这个模块，就不用手动书写元素初始化样式了，但是这个没有手动初始化精准（对用的没用的元素都初始化）

css3模块

@import "compass/css3";
.rounded {
　@include border-radius(5px);  //引入compass的库，使用compass语法来调用@include函数
  @include opacity(0.5); //调用透明
  @include border-corner-radius(top, left, 5px); //左上角 圆角
  @include inline-block;  //行内元素
}

utilities功能模块

@import "compass/utilities";
.clearfix { @include clearfix; }

书写尽量紧凑，去除折行，否则报错：
Invalid CSS after "...nclude clearfix": expected "{", was ";")

引入核心模块
将样式中的图片转化为base64，语法background-image: inline-image(xxx)

@import "compass";
.icon { background-image: inline-image("icon.png");}