Retinafy your website with Sass & Compass 的技术文档

1. 安装指南

首先，确保你的系统中已经安装了Sass和Compass。你可以通过以下命令使用Bower来安装sass-hidpi：

bower install sass-hidpi

或者，你也可以手动下载_hidpi.scss文件到你的Sass项目中（最好是在启用了Compass的项目中）。

2. 项目的使用说明

在Sass文件中导入hidpi部分，你就可以在你的项目中使用这个mixin了。

@import 'path/to/hidpi';

使用Mixin传递内容

你可以将任何内容传递给mixin，它将在高密度显示上显示。

例如，以下是如何为#logo元素的边框颜色设置不同的值：

• 在普通显示器上为蓝色
• 在HiDPI（类似Retina）显示器上为红色

#logo {
  background: url('../images/logo.png') no-repeat;
  border: 1px solid blue;

  @include hidpi {
    background-image: url('../images/logo_x2.png');
    background-size: 250px 188px;
    border-color: red;
  }
}

仅图像

当你传递一个图像名称作为参数时，hidpi()将在高分辨率显示器上提供等效的高分辨率图像。

图像文件应按以下方式命名，并放置在Compass项目中的images文件夹内：

• image.png：默认图像
• image_x2.png：高分辨率图像

#logo-auto {
  @include hidpi(logo);
}

调试模式

你可以强制hidpi()始终提供高分辨率图形，以便在标准非Retina显示器上进行测试。

将$hidpi-debug变量设置为true：

#logo-auto-debug {
  $hidpi-debug: true; // 在标准显示器上强制高分辨率图形
  @include hidpi(logo);
}

非PNG图像

hidpi(image)默认查找images/image.png。

如果你的图像是JPEG格式，例如image.jpg，你应该在第二个参数中指定它：

#image-jpeg {
  @include hidpi(image, jpg);
}

GIF图像也是如此：

#image-gif {
  @include hidpi(image, gif);
}

3. 项目API使用文档

本项目主要是通过Sass mixin来提供服务，因此没有传统的API接口。以下是如何使用hidpi mixin的例子：

• @include hidpi(content);：在普通显示器和HiDPI显示器上提供不同的样式。
• @include hidpi(image, type);：为非PNG图像指定图像类型。

4. 项目安装方式

除了使用Bower安装外，还可以通过以下步骤手动安装：

1. 下载_hidpi.scss文件。
2. 将文件放置在你的Sass项目目录中。
3. 在你的Sass文件中导入_hidpi.scss。
4. 开始使用hidpi mixin。

确保你的Sass和Compass版本符合要求：Sass版本至少为3.2，Compass版本至少为0.12.2。