css - 使用 SASS/Compass 居中 Sprite

Question

我在使用 Compass Sprites 水平居中 sprite 时遇到问题。

我有一堆图标大小不同的 Sprite ，我希望它们以它们所在的容器为中心，例如，它们是左侧图标。

如果我这样做:

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

然后图像以生成的 sprite.png 为中心，但 CSS 实际上是这样的:

background-position: -9px -223px;

而不是预期的:

background-position: 50% -223px;

如果要像那样明确声明位置，那么将它置于 Sprite 中心有什么意义？现在我将其硬编码为 50% 和 Y 轴，这很糟糕，因为当我添加一个新的 Sprite 时，我必须更改它们，这完全违背了目的。

我是不是在 Compass、CSS 中做错了，还是它没有按预期工作？ 我能看到这样做的唯一方法是让它指定尺寸，然后包含图标并将其居中。剩下 50% 的值就在那里，所以您不需要这样做……对吧？

请注意...很糟糕，Compass 也不支持 JPEG Sprite 图 -.- 在首页上有大约 6 张宣传图片，最好将它们拼凑起来，您可以直接替换图片在文件夹中并对其进行排序!

谢谢，多姆

Answer 1

刚刚偶然发现了您的问题。我明白你的意思并且遇到了同样的问题。我也试图找到一个通用的解决方案。但是atm好像不行。

对我来说 position offset option可行，但它并不完美，因为您必须将它应用于每个 Sprite :

@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 本身能够提供这样的选项，那就太好了。