Allenmind‘s Blog
tianzyc 2020-02-01
听说，Sass和Compass更配哟。来看看Compass的基本用法！
目录
一、Compass和Sass
之前写了一篇关于Sass基本用法的文章。Sass可以加快CSS的编写效率，让CSS的开发变得更加简单和可维护。但是，想要发挥Sass的全部功力，就需要配合Compass一起使用。（就好像，下雨天和巧克力更配哟~这样的道理）
Compass是Sass的工具库（Toolkit）。
Sass本身只是一个编译器，Compass是在它的基础上，封装了一系列有用的模板和模块，补充了Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rail、python和Django。
二、安装Compass
Compass和Sass一样，同样是Ruby语言开发的，所以，要先安装Ruby。
当安装完Ruby后，现在假设在Windows环境下，只要在命令行输入一下命令，即可安装Compass：
gem install compass
三、项目初始化
现在我们来创建一个Compass项目，假设项目名称为“learnCompass”，我们在当前目录的命令行输入：
compass create learnCompass
然后就会看到在当前目录中会出现一个叫learnCompass的文件夹。
里面有3个东西：
- config.rb文件：是项目的配置文件
- sass文件夹：存放Sass源文件
- stylesheet文件夹：存放编译后的css文件
四、编译
当我们写完.scss文件后，需要经过编译，才能生成css文件。现在说一下如何通过Compass来编译.scss文件。
Compass的编译命令是：
compass compile
这条命令要在 项目的根目录 下运行。效果是会将sass文件夹里面的.scss文件，编译成css文件，然后保存在stylesheet文件夹里面。
默认情况下，编译出来的css文件是带有很多的注释。在生产环境中，我们需要的是压缩后的css文件，这时候要使用 --output-style 参数。
compass compile --output-style compressed
Compass只编译 发生变动的文件 ，如果要重新编译未变动的文件，需要使用 --force 参数：
compass compile --force
除了使用命令行的参数，还可以直接在配置文件（config.rb）中指定编译模式：
output_style = :compressed
这里的参数和Sass的编译模式一一对应，:nested、:expanded、:compact和:compressed。
另外，可以指定environment的值（:production或:development），智能判断编译模式。
environment = :development output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下，除了一次性编译命令，Compass还有自动编译命令：
compass watch
运行这条命令后，只要.scss文件发生了变化，就会被自动编译成css文件。
更多Compass命令行的用法，请参考官方文档
五、Compass的模块
Compass采用模块结构，不同的模块提供不同的功能。目前，Compass内置了5个模块：
这5个模块提供了Compass的主要功能。
当然，我们也可以自行加载网上的第三方模块，或者自己动手编写模块。
下面来介绍一下如何使用模块：
使用模块的大致方法是：先用@i 大专栏 Allenmind‘s Blogmport命令把那个模版加载进来，然后再用@include命令调用模版里面的各种mixin。
1、reset模版
这个reset模版编译出来的CSS文件，就是一般用来重置浏览器默认样式的CSS文件（reset.css）。
@import "compass/reset";
2、css3模版
这个模版已经帮你把19种CSS3属性分别写成了19个Mixin，每个Mixin里面写好了各种浏览器前缀和兼容手段。导入模版后，用@include命令调用你想用的属性的Mixin即可。具体各个Mixin的用法请看：这里。
例子1： CSS圆角（border-radius）
@import "compass/css3";
.rounded1 {
@include border-radius(5px);
}
.rounded2 {
@include border-corner-radius(top, left, 5px);
}编译后的CSS代码为：
.rounded1 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.rounded2 {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
}例子2：透明（opacity）
@import "compass/css3";
#opacity {
@include opacity(0.5);
}编译后的CSS代码为：
#opacity {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}例子3：inline-block
@import "compass/css3";
.div-inline {
@include inline-block;
}编译后的CSS代码为：
.div-inline {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
}3、layout模版
layout模版提供了布局功能（目前有3个功能：Grid Background、Sticky Footer 和 Stretching）。
例子：指定子元素占满父元素（Stretching）：
@import "compass/layout";
#stretch-full {
@include stretch;
}4、typography模版
typography模版提供了版式功能（链接、列表、文本处理、Vertical Rhythm）。
例如，指定链接（Link）各个状态的颜色的Mixin为：
link-colors($normal, $hover, $active, $visited, $focus)
使用时写成：
@import "compass/typography";
a {
@include link-colors(#F00, #0F0, #00F, #CCC, #AC0);
}编译后的CSS代码为：
a {
color: #F00;
}
a:visited {
color: #CCC;
}
a:focus {
color: #AC0;
}
a:hover {
color: #0F0;
}
a:active {
color: #00F;
}5、utilities模版
utilities模版提供某些不属于其他模块的功能。
比如，清除浮动：
@import "compass/utilities";
.clearfix{
@include clearfix;
}六、Compass的Helper函数
Compass提供了一些补充函数。这些函数可以大大增强Sass的威力。
例如，image-width() 和 image-height() 可以返回图片的宽和高。
又例如，inline-image() 可以将图片转为data协议的数据。
@import "compass";
$picWidth: image-width("pic1.png");
$picHeight: image-height("pic1.png");
.pic {
width: $picWidth;
height: $picHeight;
}（图片默认放在该compass项目目录里面的images文件夹里面，没有就新建一个）
编译后的CSS代码为：
.pic {
width: 405px;
height: 540px;
}(本文主要参考阮一峰老师的文章)
