Sass & compass

使用Compass之前，请先保证你已经安装过Compass( 先安装ruby，然后使用gem install compass完成安装 )

注意：Compass在windows下，由于ruby的问题，存在一定的对中文支持不是很好的问题，建议安装ruby1.8.7

建议使用之前先自行了解SASS和Compass的相关特性。

注意事项

compass打包目录

• src/pages/your_page
• src/widget/your_widget
• src/common

默认情况下，Compass会打包目标目录下的所有文件（作为入口打包），根据SASS的特性，建议的做法：

所有非入口文件，都以_为前缀，这样Compass便不会直接打包该文件

雪碧图

Compass有非常方便的雪碧图自动合成功能，要使用雪碧图，请将图片放置到以下目录：

• src/pages/your_page/images
• src/widget/your_widget/images
• src/common/images

假设我们有两个图片，在src/widget/tip/images/s/success.png和src/widget/tip/images/s/error.png，则通过下面方式引入：

// src/widget/tip/index.scss
@import "s/*.png";

.tip-error {
  @include s-sprite("error");
  height: s-sprite-height("error");
  width: s-sprite-width("error");
}

打包后，compass会将生成完毕的图片生成到build/widget/tip/images/s-klj979809l098ljio.png中（图片名为一串hash值）。

自动配置线上雪碧图地址

可以通过在abc.json中写入正确的设置，来让compass在编译后生成的雪碧图地址就是线上地址，如下abc.json：

{
    "name": "jury",
    "desc": "description of your app",
    "version": "0.0.2",
    "type": "kissy-cake",
    "type-url": "http://abc.f2e.taobao.net/spec/kissy-cake",
    "author": {
        "name": "yinruo.nyj",
        "email": "yinruo.nyj@taobao.com"
    },
    "repository": {
        "type": "git",
        "url": "http://gitlab.taobao.ali.com/tb/jury",
        "publish": "http://g.tbcdn.cn/tb/jury"
    },
    "_kissy_cake": {
        "groups": {},
        "styleEngine": "sass",
        "defaults": {
            "pages": [ "detail" ]
        }
    }
}

其中和compass的雪碧图路径相关的字段：

• version这个是发布的时间戳
• repository.publish线上发布路径

则根据以上配置，发布后的雪碧图路径为 http://g.tbcdn.cn/tb/jury/0.0.2/widget/tip/images/s-klj979809l098ljio.png