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

前端之家收集整理的这篇文章主要介绍了使用没有Compass的Sass创建CSS sprite?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
更新 – 20140614:

在没有得到这个问题的答案之后,或者在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的图像精灵”根本没有返回任何相关结果.

解决方法

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

您将不得不使用任务运行器来实现这一目标.由于您不愿意使用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

猜你在找的CSS相关文章