使用Sass Mixins自动生成Icons Sprite
日期：2014-04-26 浏览次数：23172 次
| 文章简介：Sass Mixins——支持Retina的Icons Sprite。 |
Retina雪碧图标——在你的网站上前端人员可以很容易使用Sass Mixins自动生成。不过你需要在项目中安装Sass和Compass才能正常使用。
根据设置步骤你可以设置你自己的Compass。如果你想实现自动化和完全控制你自己的开发资源，我强烈建议您阅读后面的“扩展细节”。
容易整合
让我们先从一个非常简单的例子来发解如何使用它。如果你已经下载了包，你会发现一个food-icons.css文件在你的目录中。并且有18张图片在你的img/food-icons在目录中。你也会找到两个目录名为120和64，两种都包含两个其他的子目录中生成的图像，用于正常显屏和Retina显屏。我们将向您展示如何生成的细节以及扩展细节。
首先让我们看看使用图标的地方的HTML标签和CSS命名约定。你可以在任何元素上添加这些生成图标。我建议使用一个<span>元素，如下所示：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
