Compass

Compass在sass的基础上封装了一系列有用的模块和模板，用以补充sass的功能。更多sass

1、安装

Compass是用Ruby语言开发的，因此首先要安装Ruby。如何安装Ruby

sudo gem install compass

---

2、创建项目

进入需要创建项目的目录下，然后运行

compass create mycompass

此时就会在在该目录下创建一个mycompass的子目录。目录结构
.
├── config.rb
├── sass
│ ├── ie.scss
│ ├── print.scss
│ └── screen.scss
└── stylesheets
├── ie.css
├── print.css
└── screen.css

• config.rb 为配置文件
• sass 文件夹 存放编写的sass文件
• stylesheets文件夹 存放编译后的样式表文件。

---

3、模块化结构

compress采用的是模块化结构，不同的模块提供不同的功能。目前，有如下模块：

• reset
• css3
• layout
• typography
• utilities

3.1、reset模块

重置浏览器的默认样式表，那么可以在scss文件中指定加载模块。

@import "compass/reset";

3.2、css3模块

compress内置多种css3命令。

首先还是要加载模块

@import "compass/css3";

3.2.1、圆角命令

scss：

.rounded {
    @include border-radius(5px);
}

css:

.rounded {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}

左上角圆角

@include border-corner-radius(top, left, 5px);

3.2.2、透明命令

scss:

#opacity {
　　　　@include opacity(0.5); 
　　}

css:

　　#opacity {
　　　　filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
　　　　opacity: 0.5;
　　}

3.2.3、行内区块命令

scss:

#inline-block {
　　　　@include inline-block;
　　}

css:

#inline-block {
　　　　display: -moz-inline-stack;
　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　*vertical-align: auto;
　　　　zoom: 1;
　　　　*display: inline;
　　}

3.3、layout模块

该模块提供了布局功能

引入模块

@import "compass/layout"

指定footer元素始终出现在浏览器最底端

#footer {
　　　　@include sticky-footer(54px);
　　}

指定子元素占满父元素的空间

#stretch-full {
　　　　@include stretch; 
　　}

3.4、typography模块

该模块提供了版式功能

@import "compass/typography";

比如，指定链接颜色的mixin为：

link-colors($normal, $hover, $active, $visited, $focus);

使用时写成：

a {
　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
　　}

3.5、utilities模块

该模块提供了某些不属于其他模块的功能

import "compass/utilities/";

比如，清除浮动：

.clearfix {
　　　　@include clearfix;
　　}

再比如，表格：

table {
　　　　@include table-scaffolding;
　　}

编译后生成

　　table th {
　　　　text-align: center;
　　　　font-weight: bold;
　　}
　　table td,
　　table th {
　　　　padding: 2px;
　　}
　　table td.numeric,
　　table th.numeric {
　　　　text-align: right;
　　}

---

4、Helper函数

除了模块，compass还提供了很多函数。
引入

@import "compass";

再比如，inline-image()可以将图片转为data协议的数据。

　　.icon { background-image: inline-image("icon.png");

编译后得到

.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

函数与mixin的主要区别是，不需要使用@include命令，可以直接调用。

---

**

---

**

---

编译

网站使用的css的样式文件，但是我们编写出来的是scss类型的，因此需要将它们编译成网站可以识别的css。

我们在项目的根目录运行以下代码就可以将scss编译成css.

compass compile

但是经过此种编译后的css文件带有大量的注释。而生产环境需要的是压缩后的css文件。此时可用

compass compile --output-style compressed

compass只会去编译发生了改变的文件，但是可以强制编译未编译的文件。

compass compile --force

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

output_style = :expanded | :nested | :compact | :compressed |

• :expanded 表示生产后表留原格式
• :nested 表示
• :compact 表示
• :compressed 表示压缩模式。生产时候使用这个模式

还可以通过environment的值只能判定编译模式

evironment = :development
output_style = ()? :compressed : :expanded

evironment有两个值:production产品和development开发

我们除了手动使用命令行去编译，还以使用命令观察sass文件变化，当监测到变化时会自动编译。

compress watch

声明：1、Compass用法指南