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

Question

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

Answer 1

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

安装Compass的alpha版本

要安装它，您可以使用Bundler来污染您的全局环境。首先，安装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;
}