compass安装

gem install compass

项目初始化及编译

创建一个Compass项目

compass create myProject

创建完之后进入该目录

cd myProject

config.rb ：项目的配置文件
sass ： sass源文件存放目录
css ： css源文件存放目录

编译

Compass的编译命令是 compass compile
Compass编译生产环境需要压缩后的css文件 compass compile --output-style compressed
Compass只编译发生变动的文件，如果要重新编译未变动的文件 compass compile --force
Compass自动编译命令 compass watch

.scss文件转换为.sass文件
sass-convert main.scss msin.sass

Compass 核心模块

reset模块：重置样式，可用normalize代替
layout模块：页面布局控制能力，使用较少
CSS3模块：提供跨浏览器的CSS3能力
Typography模块：修饰文本样式
Utilities模块：提供某些不属于其他模块的功能，多为mixin

以下两个模块需要指定引入
@import "compass/reset"
@import "compass/layout"

CSS3模块

引入

@import "compass/css3";

调用

// 边框阴影
@include box-shadow(1px 1px 5px #000);
// 动画
@include animation(myani 10s ease-in-out 2s infinite alternate);
// 背景绘制区域
@include background-clip(padding-box);
// 背景图像定位
@include background-origin(padding-box);
// 边框圆角
@include border-radius(3px);
// 透明度
@include opacity(.5);
// 转换
@include transform(translate(20px,50px));
// 过渡
@include transition(all 2s ease-in-out 1s);
// 行内区块
@include inline-block;
// 渐变
@include background(linear-gradient( #333, #0c0));
// placeholder
input[type="text"] {
  @include input-placeholder {
    color: #bfbfbf;
    font-style: italic;
  }
}

Browser Support 模块

引入

@import "compass/support";

配置

// 支持的浏览器
$supported-browsers: chrome, firefox, ie, opera, safari;
// 支持浏览器的最低版本
$browser-minimum-versions: ("ie": "8","chrome": "12");

Typography 模块

引入

@import "compass/typography";

修改不同状态下链接颜色

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

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

Utilities 模块

精灵图合图

第一步：把所有需要合图文件放在images文件夹下的新建icons文件夹内
第二步：创建一个_icons.scss文件并引入screen.scss文件内
```
  @import "icons";
```
第三步：在_icons.scss文件中引入sprites模块
```
  @import "compass/utilities/sprites";
```
第四步：在_icons.scss文件中引入icons文件夹内的所有png图片
```
  @import "icons/*.png";
```
此时会在icons文件夹同级生成一个精灵图
第五步：调用mixin all-icons-sprites()
```
  @include all-icons-sprites();
```
此时会在编译后的css文件内自动生成与文件名相关的类名并设置好background-position

在命令行输入compass sprite "icons/*.png" 可以看到合图时生成的.scss文件
第六步：在想设置精灵图的类名下调用mixin icons-sprite("imgName")
```
  .icons__item{
      @include icons-sprite("alipay");
  }
```
说明：文件命名时如果存在xxx.png和xxx_active.png和xxx_hover.png，则会自动生成hover和active状态下的css

变量配置

变量配置设置要在_icons.scss最顶部进行，为了重置默认变量

$icons-sprite-dimensions : 设置变量$icons-sprite-dimensions值为true，则在相应类名下生成相应图片宽高，默认为false
```
  $icons-sprite-dimensions: true;
```
$icons-layout : 设置合图方向，值有vertical和horizontal和smart，默认为vertical
```
  $icons-layout: smart;
```
$disable-magic-sprite-seletors : 设置是否不智能生成:hover和:active伪类，值有false和true，默认为false
```
  $disable-magic-sprite-seletors: true;
```

Helps函数

image-width()函数：返回图片的宽
image-height()函数：返回图片的高
inline-image()函数：将图片转为data协议的数据，消除HTTP请求，对小图像来说是性能优化，但生成的CSS文件更大

$width: image-width('alipay.png');
$height: image-height('alipay.png');
.ali {
    background-image: inline-image('alipay.png');
    width: $width;
    height: $height;
}

图标适配retina屏幕

第一步：在sass文件夹内放入_retian-sprites.scss文件
第二步：在_icons.scss中引入_retian-sprites.scss文件
```
  @import "retina-sprites";
```
第三步：在images文件夹下新建retina-version文件夹
第四步：在retina-version文件夹下新建sprites文件夹和sprites-vertion文件夹
第五步：在相应文件夹内放入相应图片

第六步：在_icons.scss中配置变量

  $sprites: sprite-map("retina-version/sprite/*.png");
  $sprites2x: sprite-map("retina-version/sprite-retina/*.png");

第七步：在_icons.scss中调用mixin
```
  .icon-alipay{
      @include retina-sprite(alipay[,true,true]);
  }
```
第二个参数为可选参数，设置为true则会生成:hover样式
第三个参数为可选参数，设置为true则会生成:active样式

Compass入门