Question

更新 - 20140614：

在没有得到这个问题的答案之后，或者在github上，我决定提出自己的问题解决方案。我正在使用Compass做很多事情，但其主要功能在于它能够生成图像精灵大多数其他事情可以使用纯SCSS完成。

因此，我写了broccoli-sprite。这与ember-cli内置的SCSS支持结合使用使用broccoli-sass，能够满足我的需求。

原始问题：

使用Sass，但没有指南针，是否可以创建CSS精灵？

我正在寻找一种方法来完成等效输出，因为这个Sass + Compass会完成：

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";

基本上这包括两件事：

一起加入几张图片
生成CSS类，使background-image指向已连接的图像，其坐标和尺寸仅显示已连接图像的右侧部分。

后者，生成CSS类应该可以使用Sass，但是，前者，加入几个图像，可能吗？如果是这样，怎么办呢？

注意：我不确定之前是否有人这样做过，主要是因为谷歌搜索“没有罗盘的sass图像精灵”和“sass -compass图像精灵”根本没有返回任何相关结果。

Answer 1

Sass本身不会帮助你生成精灵。

你必须使用任务运行器才能实现这一目标。由于您不愿意使用Compass，我假设您处于Node环境中。

最受欢迎（但不是最好的）任务选手是Grunt。

Grunt有很多精灵生成方法。我设法为你搞定了一些（没有特别的顺序）：

使用没有Compass的Sass创建CSS sprite？

1 个答案: