css - 指南针精灵背景相对于元素的定位？

Question

我正在努力寻找一个好的解决方案，据我所知，指南针页面上没有任何内容。

问题：滑动门样式的 CSS 背景。

使用垂直样式表，我可以为我的背景精灵获取两侧没有任何内容的图像。

对于我的标题的左侧，我只是简单地包含了精灵：

    @include header-plain-blue-left;
// will give me
  background-position: 0 -903px;

然后 compass 生成 CSS，它非常适合。问题出现在右侧，我想要的是与元素右侧对齐的精灵，据我所知，指南针不允许这样做。

所需的输出是：

  background-position: right -903px;

我唯一让它工作的是创建一个mixin并专门声明背景文件名和位置：

@mixin header-plain-blue-right {
     background: url(../images/sprites-s2ba933e4ea.png) no-repeat right -346px;
     }

这很麻烦而且不是很时髦......

有谁知道如何让指南针做到这一点？我错过了一些明显的东西吗？或者有人知道插件吗？

或者，如果有一种方法可以控制首先将哪个图像添加到地图中（以及因此在 spritemap 中的顺序），那可以使添加内容变得更加容易......

score 2 · Accepted Answer

*更新：误报。这在 Firefox 中不起作用。所以没用。*

所以，过了很久。我已经意识到这样做的超级简单方法。我不敢相信我没有早点得到。

对于其他遇到此问题的人。这真的很*太*简单。

@include header-plain-blue-left;
background-position-x: right;

这个简单的 css 规则将覆盖为 x 生成的罗盘定位。而且，作为奖励，如果您需要相对于 spritemap（偏移）定位精灵，罗盘也有一个功能：

     @include <folder>-sprite-position(<sprite>, $offset_x, $offset_y)

我希望至少有人觉得这很有帮助！

score 0 · Accepted Answer

以下适用于所有浏览器

@include sprite-background-position($sprite, tab, 100%, 0);

100% 值与“正确”定位相同。

2 回答 2