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

Question

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

bgu*_*uiz 5 css sass css-sprites sprite compass-sass

更新 - 20140614:

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

因此,我写了西兰花精灵.这与ember-cli使用broccoli-sass内置支持SCSS一起使用,能够满足我的需求.

您可以在此处详细了解该过程.

原始问题:

使用Sass,但没有 Compass,是否可以创建CSS sprites？

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

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

Run Code Online (Sandbox Code Playgroud)

基本上这将包括两件事:

将几幅图像连在一起
生成background-image将指向连接图像的CSS类,以及它的坐标和尺寸,以显示连接图像的右侧部分.

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

注意:我不确定之前是否有人这样做过,主要是因为谷歌搜索"没有指南针的sass图像精灵"和"带有sass -compass的图像精灵"根本没有返回任何相关结果.

Answer 1

And*_*aus 4

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

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

最流行（但不是最好）的任务运行程序是Grunt。

Grunt 有许多用于精灵生成的方法。我设法为你搜索了一些（排名不分先后）：

归档时间：	11 年，5 月前
查看次数：	4855 次
最近记录：	11 年，2 月前