SASS + COMPASS - image sprite repeat-y [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 7 years ago.

Improve this question

How to make a sprite from a lot of pictures, and one of them use the "repeat-y" I see that there is an update about that - https://github.com/chriseppstein/compass/commit/a8241e7924410d0e0f63fca0742e3a01897e4e2c

Answer 1

You have to use the development version of Compass (see rubygems).

Install an alpha version of Compass

For install it, you can uses Bundler to not pollute your global environment. In first place, install bundler:

$ [sudo] gem install bundler

Now, put in your Compass project a file named Gemfile with the following content:

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

Initialize the Bundler project locally:

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

You can use the command bundle exec compass instead of compass for used that specific version of Compass.

Use the repeat-y option of the sprite engine

Automatic sprites

If you use the basic import, you have to declare the variable $<map>-<sprite>-repeat: repeat-y before the import:

@import "compass/utilities/sprites";

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

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

In this example, the image named icons/foobar.png will be repeated vertically.
Note that this featured only works with a horizontal layout.

Manual sprites

The syntax to declare a repeat-y for a sprite is $<map>-<sprite>-repeat: repeat-y. Again, only the horizontal arrangement will be viable:

@import "compass/utilities/sprites";

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

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