1.x 版本相关配置

环境配置

QMUI Web 1.x 版本依赖于 gulp，Sass，Compass，Node.js（gulp 需要依赖），Ruby（Sass 和 Compass 需要依赖）。

• Node.js 的安装可以参考 Node.js 官网
• Ruby 的安装可以参考 Ruby 官网。
• 以下的安装命令建议在 Mac 下都加上 sudo。

#安装 gulp
npm install --global gulp
#安装 Sass
gem install sass
#安装 Compass
gem update --system
gem install compass

雪碧图扩展组件

QMUI 1.x 版本提供了一套基于 Compass 的自动 CSS Sprite 的方案，但由于该方案无法剥离业务耦合，因此无法抽成公共的方法，所以无法集成到 QMUI Web 源码中，这里使用示例的形式展示该方案。

具体实现见下方：

@charset "UTF-8";
/**
 * _images.scss CSS Sprite 处理
 * @author Kayo
 * @date 2015-09-01
 *
 */

// 创建一个文件去处理 CSS Sprite
// 引入 compass 的相关框架，定义了一些常用的variables和mixins，具体可以查看源代码
@import "compass/utilities/sprites"; 

/* .dm_icon */
// sprite map 我们可以通过映射来使用不同的名字
$dm_icon : sprite-map("icons/*.png"); 
$dm_icon_2x : sprite-map("icons_2x/*.png");
$dm_icon_3x : sprite-map("icons_3x/*.png");
// 方便在以其他 className 命名的 dom 中调用图标，如果单纯继承 .ww_commonImg, 会产生很多冗余代码
%dm_icon { 
  @include inlineBlock;
  font-size: 0;
  background-repeat: no-repeat;
  // sprite-url 生成 sprite 图，并配合 config.rb的 relative_assets = true 返回相对路径
  background-image: sprite-url($dm_icon);
  @include screenResolution(2) {
    background-image: sprite-url($dm_icon_2x);
  }
  @include screenResolution(3) {
    background-image: sprite-url($dm_icon_3x);
  }
  // 生成sprite图之后才能获取宽高，所以sprite-width、sprite-height需放在sprite-url后面
  background-size: sprite-width($dm_icon) sprite-height($dm_icon); 
}
.dm_icon {
  @extend %dm_icon;
}
@each $iconName in sprite-names($dm_icon) {
  %dm_icon_#{$iconName} {
    @include sprite($dm_icon,$iconName,true); // 输出background-position、width、height
  }
  .dm_icon_#{$iconName} {
    @extend %dm_icon_#{$iconName};
  }
}

// 对于具有链接效果的 icon，建议使用 a>span.icon 的格式去实现
// a:hover {
//   .dm_icon_Comment { @include sprite-background-position($dm_icon, "Comment_Hover"); }
// }
// a:active {
//   .dm_icon_Comment { @include sprite-background-position($dm_icon, "Comment_Active"); }
// }

如果你已经通过代码大概了解了这套方案的机制，那么下面还有几点总结可以帮助了解这套方案：

• 总的思路是在图片目录内，为一张 Sprite 图所需的所有 icon 建立一个目录，Compass 会去遍历这个目录，并根据图片名和前缀生成对应的虚函数和 class。因此所有的 icon 都应该用一个独立的 span 去实现。
• 如果是带有链接的 icon，应该使用 a 标签，通常这类 icon 还有 hover 的效果，需要在 hover 时切换另一张图，这时候应该用 a>span.icon 的形式实现，a:hover 时通过 Compass 的命令获取需要的图片，具体的写法可以参见 scss 文件。
• 两倍图也是另外建立一个与存放一倍图的目录平级的目录，使用 Compass 遍历，与一倍图相似。这里要提醒的是，1倍图和2倍图的宽高必须保持严格的1:2的关系，因为 Compass 最终会以一倍图的尺寸计算每个 icon 的 background-position，再利用 background-size: 100% 控制2倍图的显示，如果尺寸不成比例，2倍图下的 icon 位置就会乱了。