compass模块----Utilities----Sprites精灵图合图

css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，可以减小页面的请求数、下降图片占用的字节，以此来达到提高页面访问速度的目的。可是它也有使人诟病的地方，就是拼图和后期维护的成本比较大。也正是由于这一点，致使不少开发者懒于使用css雪碧图。

配置compass项目

$ compass init

会生成相应的目录和配置文件。在images目录下创建logo目录存放需合并的图标。项目目录结构以下：

- sass
 |-- icons.scss
 |-- screen.scss - stylesheet - images |-- logo

 config.rb 文件配置以下：

1 http_path = "/" 2 css_dir = "stylesheets" 3 sass_dir = "sass" 4 images_dir = "images" 5 javascripts_dir = "javascripts" 6 
7 relative_assets = true // 使用相对目录 8 line_comments = false // 关闭行注释

合并雪碧图

输出全部雪碧图样式

新建一个文件icons.scss，在screen.scss中引入icons.scss。

在icons.scss里面引入sprites: @import "compass/utilities/sprites" 

images文件里子目录logo：把全部图片放到这里。（方便未来将其和其余图片区分开来）

在icons.scss文件里将logo文件引入进来： @import "logo/*.png"; （*引入logo目录下的全部文件）。

1 @import "compass/utilities/sprites"; // 加载compass sprites模块 2 @import "share/*.png"; // 导入share目录下全部png图片 3 @include all-share-sprites; // 输出全部的雪碧图css

生成的代码中 .logo-sprite 是雪碧图的基础类生成的每一个雪碧图默认的class规则是： .目录名-图片名 。

 

调用单个雪碧图样式

1 @import "compass/utilities/sprites";  // 加载compass sprites模块 2 @import "share/*.png"; // 导入logo目录下全部png图片 3 .main-logo{ 4  @include logo-sprite("img1"); 5 }

编译后的css为：

1 .logo-sprite, .main-logo {
2  background-image: url('../images/logo-sd097a30ac3.png');
3  background-repeat: no-repeat;
4 }
5 .main-logo {
6  background-position: 0 0;
7 }

利用魔术精灵选择器智能输出

好比hover, active, focus, target等。利用compass的魔术精灵选择器咱们就能够智能的合并各状态的图标，并输出对应的css。使用时，咱们须要将图标按照必定的规则命名。例如：

img1.png            // 默认状态图标
img1_hover.png     // hover状态图标
img1_active.png     // active状态图标

编译后的css为：

 1 .logo-sprite, .main-logo {
 2  background-image: url('../images/logo-sd097a30ac3.png');
 3  background-repeat: no-repeat;
 4 }
 5 .main-logo {
 6  background-position: 0 0;
 7 }
 8 .main-logo:hover, .main-logo.img1-hover {
 9  background-position: -120px 0;
10 }
11 .main-logo:active, .main-logo.img1-active {
12  background-position: -60px 0;
13 }

 

调出隐藏的logo.scss命令行：

compass sprite 'images/logo/*.png'

$logo-sprite-dimensions：用来控制输出CSS的时候是否根据图片大小对咱们的相应类名css属性添加一个宽和高。
$logo-layout:修改合图布局方式。

　　--默认是垂直 horizontal水平的。

　　--diagonal斜对角线布局的。

　　--smart节省空间布局

1 $logo-sprite-dimensions: true; 2 $logo-layout: horizontal;