Question

我遇到使用Compass Sprites水平居中精灵的问题。

我有一堆不同尺寸的精灵用于图标，我希望它们以它们所在的容器为中心，所以它们就是一个左手边的图标。

如果我这样做：

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

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

background-position: -9px -223px;

而非预期：

background-position: 50% -223px;

如果它具有专门声明的位置，那么将它集中在精灵上的重点是什么？现在我把它硬编码为50％和Y轴很糟糕，因为当我添加一个新的精灵时，我必须改变所有这些完全违背目的。

我在Compass，CSS中做错了吗？或者它不能像它应该的那样工作？我能看到这一切的唯一方法是让它指定尺寸然后包含图标并将其置于那里。虽然有50％左边的值，所以你不需要这样做......对吗？

只是一个注意......很糟糕，指南针也不支持JPEG精灵 - 在首页上有大约6个促销图像，如果你可以更换图像，那么它们会很精彩在文件夹及其排序！

谢谢，Dom

Answer 1

刚刚提出你的问题。我明白了你的观点并遇到同样的问题。我也试图找到一个通用的解决方案。但它似乎不可能是atm。

对我而言position offset option有效，但它并不完美，因为你必须将它应用于每个精灵：

@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。但是，如果指南针本身提供这样的选择，那将会很棒。

Answer 2

只是为了检查我是否让你正确：你为你想要居中的所有图标创建了一个精灵。在精灵中所有图标都居中，所以你可以使用x：50％和相应的y值，对吗？

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

通过这种方式，您可以减少HTTP请求，这是精灵的主要目的，但同时您可以获得正常图像所带来的所有好处。

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

Answer 3

我有同样的问题。我想垂直居中一个水平精灵（例如使用：在内联元素后创建图标）。不幸的是，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%;
    //...
}

我希望我能提供帮助。

使用SASS /指南针对准精灵

3 个答案: