Lemonade 项目技术文档

1. 安装指南

由于 Lemonade 项目已经被合并到 Compass 中，并且 Lemonade 本身已经不再维护，因此建议用户直接使用 Compass 来生成 CSS Sprites。如果你仍然需要使用 Lemonade，可以参考以下步骤进行安装。

1.1 使用 Compass

Compass 是一个强大的 CSS 框架，支持生成 CSS Sprites。你可以通过以下步骤安装 Compass：

1. 安装 Ruby（如果尚未安装）。
2. 使用以下命令安装 Compass：

   gem install compass
   

1.2 使用 Lemonade（旧版本）

如果你仍然需要使用 Lemonade，可以按照以下步骤进行安装：

1. 在项目的 Gemfile 中添加以下内容：

   gem 'lemonade'
   gem 'chunky_png', '0.11.1'
   

2. 运行以下命令安装依赖：

   bundle install
   

2. 项目的使用说明

2.1 使用 Compass 生成 Sprites

Compass 提供了简单易用的 API 来生成 CSS Sprites。以下是一个简单的示例：

1. 在你的 Sass 或 SCSS 文件中，使用 @import 引入 Compass：

   @import "compass";
   

2. 使用 @import 引入需要生成 Sprite 的图像文件：

   @import "icons/*.png";
   

3. 使用 sprite-map 生成 Sprite 图像，并使用 sprite 函数来设置背景：

   .icon-home {
     background: sprite($icons, home);
   }
   

2.2 使用 Lemonade（旧版本）

如果你使用的是 Lemonade 的旧版本，可以在 Sass 或 SCSS 文件中使用以下语法来生成 Sprite：

background: sprite-image("icons/home.png");

3. 项目 API 使用文档

3.1 Compass API

Compass 提供了丰富的 API 来生成和管理 CSS Sprites。以下是一些常用的 API：

• @import "icons/*.png";：引入指定目录下的所有 PNG 图像。
• sprite-map("icons/*.png")：生成一个 Sprite 图像。
• sprite($map, $name)：获取指定图像的背景位置和 URL。

3.2 Lemonade API（旧版本）

Lemonade 的 API 相对简单，主要通过 sprite-image 函数来生成 Sprite：

• sprite-image("icons/home.png")：生成指定图像的 Sprite，并返回背景位置和 URL。

4. 项目安装方式

4.1 安装 Compass

Compass 的安装非常简单，只需执行以下命令：

gem install compass

4.2 安装 Lemonade（旧版本）

如果你需要安装 Lemonade 的旧版本，可以在 Gemfile 中添加以下内容：

gem 'lemonade'
gem 'chunky_png', '0.11.1'

然后运行：

bundle install

通过以上步骤，你可以成功安装并使用 Lemonade 或 Compass 来生成 CSS Sprites。