Css 使用SASS/指南针对中精灵

我在使用指南针精灵时遇到了水平居中精灵的问题

我有一堆不同大小的精灵作为图标，我希望它们集中在它们所在的容器上，例如，它们是左手边的图标

如果我这样做：

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

然后图像集中在生成的sprite.png上，但CSS实际上类似于：

background-position: -9px -223px;

与预期不同的是：

background-position: 50% -223px;

如果它的位置被明确地声明为那样，那么它将以精灵为中心有什么意义呢？现在我把它硬编码为50%，Y轴很糟糕，因为当我添加一个新的精灵时，我必须改变它们，这完全违背了目的

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

只是一张纸条。。。Compass也不支持JPEG sprites，这真是糟透了-头版上有6张宣传图片，如果你能把它们放在Sprite上，你就可以替换文件夹中的图片并对其进行排序了

---

谢谢，Dom，只是想检查一下我是否正确：您为所有要居中的图标创建了一个精灵。在精灵中，所有图标都居中，因此可以使用x:50%和相应的y值，对吗

由于罗盘设置的背景位置错误，您可以使用其他方法。至少，我是这么做的。如果您不需要支持IE6/7，可以使用罗盘内联数据功能：

通过这种方式，您可以减少HTTP请求，这是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%);
}

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

---

正如我所说，这不是完美的，但如果你不需要调整大量的唾液，这是有效的。你可以写一个混音。但还是。。。如果指南针本身能提供这样的选择，那就太好了。

我也有同样的问题。我想将水平精灵垂直居中（例如，在内联元素上使用：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%;
    //...
}

---

希望我能帮上忙。

Dom，您能澄清实际问题是什么吗？从你在这里所说的，听起来事情看起来是正确的，但你只是对它编码CSS的方式不满意。最终结果是否存在实际问题，或者您只是想要一些在图像更改后不必重新编译的内容？问题是我有一个60像素宽的div，并且我希望图像最大为60像素宽（例如可以是15、20、30、40、55像素）所以通常你会创建一个精灵，在CSS中你会写：background position:50%-223px，这样就可以了。但是指南针写的是精确的左位置，这意味着它不居中，它仍然是左对齐的。它应该把它放在精灵的中间，这并不真的有什么不同。CSS也需要改变。为了解决这个问题，我需要一个额外的div容器并将子精灵居中。另外，我不相信精灵精灵是一个可用的混音器，除非它是你自己定制的？嘿，Dom。对不起，我的例子错了。我更新了它，使它更容易理解。没有涉及个人“混血”。但下一步是将“每个”和“混合”结合起来。