css - SASS + COMPASS - 图像精灵重复-y

Question

如何从很多图片中制作一个精灵，其中一个使用“repeat-y”我看到有一个更新 - https://github.com/chriseppstein/compass/commit/a8241e7924410d0e0f63fca0742e3a01897e4e2c

Answer 1

您必须使用 Compass 的开发版本（请参阅ruby​​gems）。

安装 Compass 的 alpha 版本

为了安装它，你可以使用 Bundler 来不污染你的全局环境。首先，安装捆绑器：

$ [sudo] gem install bundler

现在，在您的 Compass 项目中放入一个文件Gemfile，其内容如下：

source "https://rubygems.org"
gem "compass", "~> 0.13.alpha"

在本地初始化 Bundler 项目：

$ cd my_project/
$ bundle install --path .vendors/bundler

您可以使用该命令bundle exec compass而不是compass使用该特定版本的 Compass。

使用repeat-y精灵引擎的选项

自动精灵

如果使用基本导入，则必须$<map>-<sprite>-repeat: repeat-y在导入前声明变量：

@import "compass/utilities/sprites";

$icons-layout: horizontal;
$icons-foobar-repeat: repeat-y;

@import "icons/*.png";
@include all-icons-sprites;

在此示例中，命名的图像icons/foobar.png将垂直重复。
请注意，此功能仅适用于horizontal布局。

手动精灵

repeat-y为精灵声明 a 的语法是$<map>-<sprite>-repeat: repeat-y. 同样，只有水平排列是可行的：

@import "compass/utilities/sprites";

$icons: sprite-map("icons/*.png",
                   $icons-layout: horizontal,
                   $icons-foobar-repeat: repeat-y);

.icons {
  background: transparent $icons no-repeat;
}