译：使用compass生成能适配retina屏的sprites

原文：https://github.com/Gaya/Retina-Sprites-for-Compass

在compass中增加retina变体可以允许你使用sprites(图片精灵)。就像正常的sprites helpers一样工作，而且用mixins已经完成的更佳容易了。

看看这个示例来看一下结果。

问题

你想让你的网站用retina图片对高清屏起作用，而不是非高清屏。compass的混合的解决方案使你用sprite技术变的非常容易，他将让compass生成两种不同尺寸的映射。

因为我们必须开发我们的网站让他对高清图片和背景图片精灵和背景图片方法起作用，但是这可能把我们的css弄的乱七八糟的。只用一个调用，这个混合将知道把哪个图片放到浏览器中，而且还会调整显示，就像你的正常图片尺寸一样。

怎样用

第一件事情就是你需要下载这个混合，并且把他们放到你本地的scss或者sass文件中。注意这个文件名开头的下划线，这个是阻止compass把他编译成css文件的。

1、在你的scss或者sass文件中包含这个混合：@import "retina-sprites";

2、在你的compass项目的图片文件夹里面创建两个子文件夹，默认名字为 icons 和 icons-2x 。

3、把图片精灵保存在这个文件夹中，正常大小的放到 ./icons 文件夹中，放大的放到 ./icons-2x 文件夹中。一定要保证这些图片的名字一样。

4、在你的.scss或者.sass文件中使用这个：@include use-sprite(<sprite-name>) 注意没有图片的格式，这个是不必要的。

使用bower安装

bower安装命令：bower install Retina-sprites-for-Compass

(如果你的项目有通过bower来管理那就可以使用命令来安装那个混合)

它做什么

compass会从你放到文件夹里的图片生成非常好的图片精灵，一定要确保只使用.png格式的图片以得到最好的结果。

仅使用文件名，compass将知道这个图片将从这巨大的精灵图片中哪里生成。如果这个浏览器运行在2倍像素比例的环境中，这个混合也将使用高清变体。

下面是从这个示例中生成的css：

.scss

.sprite2 {
    @include use-sprite("sprite2");
}

.css

.sprite2 {
    background-image: url('../images/icons-s44ec97e90e.png');
    background-position: 0 -25px;
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
    height: 25px;
     25px;
}
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
    .sprite2 {
        background-image: url('../images/icons-2x-s93dce01c9d.png');
        background-position: 0 -25px;
        background-size: 45px 95px;
        height: 25px;
         25px;
    }
}

高清背景图

使用sprites相同的原则，我创建了一个可以设置背景图和高清版本的混合。

怎样使用

1、在你的scss/sass文件中使用这个语句来包含这个混合：

　　@import "retina-background-image";

2、把一倍像素比例版本和高清版本的放到图片文件夹中的任何地方。

3、使用如下语句来运用这个样式：

　　@include background-retina(<filename.png>, <filename-retina.png>);

下面的代码将会生成如下css：

scss：

.background {
    @include background-retina("background.gif", "background-2x.gif");
}

css：

.background {
    background-image: url('../images/background.gif');
}
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
    .background {
        background-image: url('../images/background-2x.gif');
        background-size: 25px 25px;
    }
}

初次翻译，如有错误或者翻译不正确的地方麻烦指点一下，谢谢！！！