Retina Sprites for Compass 使用与技术文档

1. 安装指南

首先，请将 _retina-sprites.scss 文件放入你的项目中，建议存放在一个便于管理的文件夹中，例如 utilities 文件夹。然后，在主 CSS 文件中引入此文件：

@import "utilities/retina-sprites";

确保在项目的图像文件夹中创建了两个子文件夹，一个用于1倍尺寸的精灵图（命名为 sprites），另一个用于2倍尺寸的精灵图（命名为 sprites-retina）。如果需要，你可以在精灵图文件夹内创建子分类，如 buttons。

将图片分别放入对应的文件夹中，并确保它们的文件名相同。需要注意的是，2倍尺寸的图像尺寸必须是4的倍数，否则可能会导致图像剪辑和位移。

2. 项目的使用说明

在SCSS文件中，需要声明精灵图的位置。如果你将按钮的样式单独放在一个SCSS文件中，可以在文件顶部声明如下：

$sprites: sprite-map("sprites/buttons/*.png");            // 引入1倍尺寸精灵图
$sprites2x: sprite-map("sprites-retina/buttons/*.png");   // 引入2倍尺寸精灵图

如果你希望为精灵图添加空白间隔，可以在引入时使用 spacing 参数，并确保2倍尺寸的间隔值是1倍尺寸的两倍：

$sprites: sprite-map("sprites/buttons/*.png", $spacing: 10px);            // 引入1倍尺寸精灵图，10px间隔
$sprites2x: sprite-map("sprites-retina/buttons/*.png", $spacing: 20px);   // 引入2倍尺寸精灵图，20px间隔

接着，为精灵图创建一个类，并使用 @include 指令生成精灵图样式：

.myHoverActiveButton {
    @include retina-sprite(signIn, $hover: true, $active: true);    // 引入 signIn.png, signIn_hover.png, 和 signIn_active.png
}

.myHoverButton {
    @include retina-sprite(signIn, $hover: true);                    // 引入 signIn.png 和 signIn_hover.png
}

.myBoringButton {
    @include retina-sprite(signIn);                                  // 仅引入 signIn.png
}

3. 项目API使用文档

retina-sprites 提供了以下功能：

• 生成普通及视网膜设备的精灵图
• 可选的悬停 ($hover) 和活动 ($active) 状态
• 可选的精灵图间距/填充 ($spacing)

使用 sprite-map 函数来定义精灵图的位置和可选参数，然后通过 retina-sprite 混入（mixin）来引用具体的精灵图。

4. 项目安装方式

请遵循以下步骤安装项目：

1. 将 _retina-sprites.scss 文件添加到项目中。
2. 在SCSS文件中引入 _retina-sprites.scss 文件。
3. 创建图像文件夹及其子文件夹，并放入相应的精灵图文件。
4. 使用 sprite-map 声明精灵图路径。
5. 使用 .retina-sprite 类和对应的混入来生成样式。

按照这些步骤操作后，你就可以在项目中使用 Retina Sprites for Compass了。