CSS Compass: 生成精灵图，以及精灵图中每个图像的宽度/高度

在本文中，我们将介绍CSS Compass工具的使用，该工具可用于生成精灵图，并提供精灵图中每个图像的宽度和高度。

阅读更多：CSS 教程

什么是精灵图？

精灵图是将多个小图标或图像合并到一个单独的图像文件中的技术。通过将图像合并为一个文件，可以减少网页加载的HTTP请求次数，从而提高网页的加载速度。精灵图可以用于呈现按钮、图标、小图像等等。

CSS Compass

CSS Compass是一个功能强大的CSS框架，它提供了许多实用的工具和函数来简化CSS开发过程。其中一个非常有用的功能是生成精灵图，并且可以添加每个图像的宽度和高度信息。

使用CSS Compass生成精灵图

首先，我们需要安装并配置Compass。在项目目录中运行以下命令安装Compass：

gem install compass

成功安装后，我们可以在项目目录中创建一个名为config.rb的配置文件。打开config.rb文件并添加以下内容：

# config.rb
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
generated_images_dir = "images/sprites"

以上配置表示我们的CSS文件存放在css目录中，Sass源文件存放在sass目录中，所有图像存放在images目录中，生成的精灵图将被保存在images/sprites目录中。

接下来，我们需要创建一个Sass源文件，并在文件中添加以下内容：

@import "compass/utilities/sprites";

@import "icons/*.png"; // 导入所有精灵图的图像

@include all-icons-sprites; // 生成精灵图

.icon {
  @include icons-sprites; // 使用生成的精灵图样式
}

在以上代码中，icons/*.png表示我们将导入icons文件夹中的所有PNG图像。@include all-icons-sprites;用于生成精灵图，并将生成的CSS样式保存在_icons-sprites.scss文件中。.icon类使用@include icons-sprites;引用生成的精灵图样式。

备注：请确保已将所有的PNG图像放置在icons文件夹中。

下载完成后，运行以下命令编译Sass源文件：

compass compile

编译完成后，您将在css文件夹中看到一个名为sprites.css的文件。该文件包含生成的精灵图样式。

精灵图中每个图像的宽度和高度

CSS Compass不仅可以生成精灵图，还可以为每个图像提供宽度和高度信息。下面是一个示例：

@import "compass/utilities/sprites";

@import "icons/*.png"; // 导入所有精灵图的图像

sprites-layout: smart; // 设置布局方式为智能布局 @include all-icons-sprites; // 生成精灵图 @foreachicons-sprites as icon { .icon-#{icon.name} {
    width: icon.width; height:icon.height;
  }
}

在以上示例中，我们使用了$sprites-layout: smart;将精灵图的布局方式设置为智能布局。智能布局会根据每个图像的大小自动生成适当的偏移量。

$icons-sprites是Compass为我们生成的一个列表变量，其中包含了每个精灵图的名称、宽度和高度等信息。通过使用@foreach循环，我们可以为每个图像创建一个相应的CSS类，并通过$icon.width和$icon.height设置宽度和高度。

运行compass compile命令后，你可以在生成的CSS文件中看到每个图像的宽度和高度被正确地应用。