CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用没有Compass的Sass创建CSS sprite?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
更新 – 20140614:

在没有得到这个问题的答案之后,或者在github上,
我决定提出自己的问题解决方案.
我正在使用COR_60_11845@pass做很多事情,
但其主要功能在于它能够生成图像精灵.
大多数其他事情可以使用纯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本身不会帮助你生成精灵.

您将不得不使用任务运行器来实现这一目标.由于您不愿意使用COR_60_11845@pass,我假设您处于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

大佬总结

以上是大佬教程为你收集整理的使用没有Compass的Sass创建CSS sprite?全部内容,希望文章能够帮你解决使用没有Compass的Sass创建CSS sprite?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。