compass 制作css sprites

至于如何搭建环境，可以阅读我之前的sass学习

原文链接： https://www.w3ctech.com/topic/620

在实际的工作中，用到的点有这么几个（本人把图片放到share文件夹下）

1. 有的时候我们的图标会有多种状态，比如hover, active, focus, target等。利用compass的魔术精灵选择器我们就可以智能的合并各状态的图标，并输出对应的css。使用时，我们需要将图标按照一定的规则命名。例如：

weibo.png // 默认状态图标

weibo_hover.png // hover状态图标

weibo_active.png // active状态图标


这样sass就会为我们编写各个伪类的样式

那如何关掉这个功能呢？

$disabled-magic-sprite-selectors: false; // 默认为true，其中magic是你本人自己的文件夹名

$share-spacing: 5px;  //这些配置要写在前面才起作用
$share-sprite-base-class: ".guiqing";
$share-layout: smart;                  // 默认布局方式为vertical
$share-sprite-dimensions: true;        // 启用自动设置sprite尺寸，默认值为false,主要share为你的文件名，别复制粘贴
@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "share/*.png";                    // 导入share目录下所有png图片
@include all-share-sprites;                // 输出所有的雪碧图css,其中的share跟文件名一样

$share-sprite-dimensions: true; 
这代码的好处是自动帮你把width和height设置好，不过看你要用到不，不然会增加一部分的Css代码