2 min read

Compass 与 CSS 贴图定位

在我的前端开发工作里,CSS 贴图定位占用的时间不少。首先要切出小图片,然后放置到 sprite 大图里,确定 x、y 位置,最后写到 CSS 规则里:

body {
    background:url(../img/sprite.png) no-repeat -100px 0;
}

Photoshop 提供的确定 x、y 位置的方法并不高效,而况我还要在 CSS 文件里手写 x、y 值,完全是低效的体力劳动。后期如果还对 Sprite 做修改,那更让人头大。

Compass 提供了一个相对高效的贴图定位方法,我们要做的,只是切出小图,给它们命名,然后统一保存到某文件夹下,配置好 Compass,然后写 sass 文件,再运行命令:

compass watch

接着,Compass 自动生成贴图定位的类,我们在 HTML 代码中添加相应类名就好了。

安装 Ruby

compass 是一个 Ruby 包,所以我们需要事先安装 Ruby。最新版本的 Ruby 里已经包含 RubyGems,不需要另外安装。

安装 compass

打开命令行工具:

gem install compass

这个命令会同时安装 Compass 与 Sass。我们可以通过 compass version 命令查看安装情况。

配置 compass

根据项目情况,全新创建的,还是已有项目,我们会有不同的配置命令

比如我要在一个已有项目中配置:

compass create --css-dir "css" --javascripts-dir "js" --images-dir "img"

Compass 会自动生成一个 sass 文件夹。

在运行 compass watch 命令后,sass 文件夹下的 .scss 文件会自动编译到 css 文件夹下。

书写 scss 文件

假定要应用贴图定位的图片全部放在 img/icon/ 目录下,总共有三张:

  1. upload.png
  2. download.png
  3. pause.png

则 sass 目录下,我们的 .scss 文件这样写:

@import "icon/*.png";
@include all-icon-sprites;

注意:scss 文件中的 icon 是对应于 img 目录下的 icon 目录名称的。

compass watch 命令在 css 目录下编译出的 css 文件如下:

/* line 58, icon/*.png */
.icon-sprite, .icon-download, .icon-pause, .icon-upload {
  background: url('/img/icon-seab081b7aa.png') no-repeat;
}

/* line 60, ../../../.rvm/gems/ruby-2.0.0-p247/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icon-download {
  background-position: 0 0;
}

/* line 60, ../../../.rvm/gems/ruby-2.0.0-p247/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icon-pause {
  background-position: 0 -256px;
}

/* line 60, ../../../.rvm/gems/ruby-2.0.0-p247/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icon-upload {
  background-position: 0 -512px;
}

另外,img 目录下多出一个 icon-xxxxxxx.png 的图片,这是 compass 自动组合生成的,不需要我们操心。

接下来,我们在 HTML 代码中引用上述类即可:

<i class="icon-upload"></i>

如果我们要明确每个贴图的宽度、高度,只要在 scss 文件中的 @include all-icon-sprites 后加个 true

@include all-icon-sprites(true);

生成的 CSS 会变成如下:

/* line 58, icon/*.png */
.icon-sprite, .icon-download, .icon-pause, .icon-upload {
  background: url('/img/icon-seab081b7aa.png') no-repeat;
}

/* line 60, ../../../.rvm/gems/ruby-2.0.0-p247/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icon-download {
  background-position: 0 0;
  height: 256px;
  width: 256px;
}

/* line 60, ../../../.rvm/gems/ruby-2.0.0-p247/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icon-pause {
  background-position: 0 -256px;
  height: 256px;
  width: 256px;
}

/* line 60, ../../../.rvm/gems/ruby-2.0.0-p247/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icon-upload {
  background-position: 0 -512px;
  height: 256px;
  width: 256px;
}
报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo