使用SASS/Compass居中精灵图。

Question

我在使用Compass Sprites水平居中精灵（Sprites）的过程中遇到了问题。

我有一堆不同大小的图标，我想让它们居中显示在它们所在的容器中，以便它们可以像左侧的图标一样显示。

如果我这样做：

$sprite-position: 50%;
@import "sprite/*.png"; 

然后图像会居中显示在生成的sprite.png上，但实际上CSS的内容可能是这样的：

background-position: -9px -223px;

与预期不同：

background-position: 50% -223px;

如果它的位置会被明确声明，那么以精灵为中心有什么意义呢？现在我硬编码为50%和Y轴，这很糟糕，因为当我添加一个新的精灵时，我必须更改它们所有，这完全违背了初衷。在Compass、CSS或者其他方面我做错了吗？还是它根本就不能像它应该的那样工作？唯一我能想到的方法是指定尺寸然后包含图标并将其居中。左边的50%值在那里，所以你不需要这样做，对吧？另外，只是一句话……Compass不支持JPEG精灵也很糟糕。首页有大约6张推广图片，它们都被精灵化会很好，你只需要替换文件夹中的图片就可以了！谢谢，Dom。

- Intellix

---

Dom，你能澄清一下实际的问题是什么吗？从你在这里说的话来看，似乎一切都看起来很好，但你只是不满意它编写CSS的方式。最终结果是否存在实际问题，或者你只是想要一些东西，在更改图像后无需重新编译？ - JD Smith

问题在于我有一个宽度为60像素的div，我想让宽度最多为60像素（例如15、20、30、40、55像素）的图像居中在该Div中。通常情况下，您会创建一个sprite，在CSS中编写background-position: 50% -223px以实现此目的。但是Compass会写入确切的左侧位置，这意味着它不居中，仍然左对齐。它应该将其放在sprite的中间，这并没有真正做任何不同的事情。CSS也需要更改。为了解决这个问题，我需要有一个额外的div容器，并使子sprite居中。 - Intellix

Answer 1

我刚刚看到了你的问题。我理解你的意思并且也遇到过同样的问题。我也试图找到一个通用的解决方案，但目前似乎不可能。

对于我来说，位置偏移选项可以解决问题，但它并不完美，因为你需要对每个精灵都应用它：

@import "socialmedia/*.png";

a.twitter {
  @include socialmedia-sprite("twitter");
  @include socialmedia-sprite-position("twitter", 50%);
}

a.facebook {
  @include socialmedia-sprite("facebook");
  @include socialmedia-sprite-position("facebook", 50%);
}

这将覆盖水平值，但保留垂直值。

正如我所说的，这并不完美，但如果您不需要调整大量精灵，则可以使用。您可以编写一个mixin。但是...如果Compass本身提供这样的选项将会很棒。

- escapedcat

---

此外，我不相信sprite-sprite是可用的mixin，除非它是您自己的自定义mixin之一？ - Intellix

嘿Dom，抱歉，我的示例有误。我已经更新并使其更易理解。没有单独的“mixin”参与。但将结合“each”和“mixin”是下一步。 - escapedcat

Answer 2

只是想确认我是否理解正确：您为要居中的所有图标创建了一个精灵。在精灵内，所有图标都居中，因此您可以使用x:50％和相应的y值，对吗？

由于指南针设置了错误的背景位置，因此您可以使用其他方法。至少，这就是我所做的。如果您不需要支持IE6/7，则可以使用指南针的内联数据功能：http://compass-style.org/reference/compass/helpers/inline-data/

这样，您可以减少HTTP请求，这是精灵的主要目的，但同时也可以获得普通图像所带来的所有好处。

如果您构建一个智能mixin，这非常方便。甚至比精灵更聪明。

- woerndl

Answer 3

我遇到了同样的问题。我想要将一个水平精灵图标垂直居中（例如，在内联元素上使用 :after 创建图标）。不幸的是，Compass 将我的50%转换为50px，所以我创建了这些函数：

@function _sprite-position-nth($map, $sprite, $n) {
    $positions: sprite-position($map, $sprite);
    @return nth($positions, $n);
}

@function sprite-position-x($map, $sprite) {
    @return _sprite-position-nth($map, $sprite, 1);
}

@function sprite-position-y($map, $sprite) {
    @return _sprite-position-nth($map, $sprite, 2);
}

示例用法：

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

a.arrow:after {
    background: $icons sprite-position-x($icons, arrow-right) 50%;
    //...
}

我希望我可以帮忙。

- zsotyooo