css - compass Sprite 背景位置不是我想要的

Question

我是第一次使用 Compass Sprite 。我想让图标图像(所有尺寸都略有不同)居中。喜欢附图

我正在使用这个设置

$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;

我得到的 css 是(例如)

.icons-adventure {
  background-position: 0 -608px;
}

这不是我要求的那样。我想在顶部和左侧留出更多间距。

Answer 1

您可能想查看此 Github Gist:https://gist.github.com/adamlogic/3577147 ，它帮助我解决了过去的 spriting 问题，并且更好地了解了 Compass 中的 spriting 是如何工作的。

您可能特别感兴趣的是作者提到以下内容的部分:(粘贴在此处以防 Gist 被删除)

"I took this a bit further by defining my own (sprite) mixin."

$spritemap-spacing: 50px
@import "spritemap/*.png"

=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
  background-image: $spritemap-sprites
  background-repeat: $repeat
  +sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)

  // if no offsets given, set the dimensions of the element to match the image
  @if $offset-x == 0 and $offset-y == 0
    +sprite-dimensions($spritemap-sprites, $name)

"and how I'm using it"

// simplest case; sets the background image and dimensions of the element
h3
  +background-sprite(ribbonfull)

// custom offset; does not set the dimensions of the element
h2
  +background-sprite(ribbonend, no-repeat, 3px, 22px)

// repeating backgrounds are possible, too
#positions
  +background-sprite(doubleline, repeat-x, 0, 45px)

并且，作者生成的 CSS:

h3 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 0 -405px;
  height: 29px;
  width: 295px; }

h2 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 3px -296px; }

#positions {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: repeat-x;
  background-position: 0 -751px; }