SASS + COMPASS - 图像精灵重复-y [关闭]

Question

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

Answer 1

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

安装 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 的语法是$<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;
}