在没有得到这个问题的答案之后,或者在github上,
我决定提出自己的问题解决方案.
我正在使用Compass做很多事情,
但其主要功能在于它能够生成图像精灵.
大多数其他事情可以使用纯SCSS完成.
因此,我写了broccoli-sprite.
这与ember-cli内置的SCSS支持结合使用
使用broccoli-sass,
能够满足我的需求.
你可以read more about the process here.
原始问题:
使用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";
基本上这将包括两件事:
>将几幅图像连接在一起
>生成CSS类,使得背景图像指向连接的图像,并且其坐标和尺寸仅显示连接图像的右侧部分.
后者,生成CSS类应该可以使用Sass,但是,前者,连接几个图像,可能吗?如果是这样,怎么办呢?
注意:我不确定之前是否有人这样做过,主要是因为谷歌搜索“没有指南针的sass图像精灵”和“带有sass -compass的图像精灵”根本没有返回任何相关结果.
解决方法
您将不得不使用任务运行器来实现这一目标.由于您不愿意使用Compass,我假设您处于Node环境中.
最流行的(但不是最好的)任务跑者是Grunt.
Grunt有很多精灵生成方法.我设法为你搞定了一些(没有特别的顺序):
> https://www.npmjs.org/package/grunt-sprite
> https://www.npmjs.org/package/grunt-imagine
> https://www.npmjs.org/package/grunt-sprite-generator
> https://www.npmjs.org/package/grunt-spritesmith
> https://www.npmjs.org/package/grunt-sprite-packer