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

Question

我很难为此找到一个好的解决方案，据我所知，Compass页面上没有任何内容。

问题：滑门式css背景。

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

对于标题的左侧，我只是将精灵包含在内：

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

然后罗盘生成CSS，它完全适合。问题来自右侧，我想要的是精灵与元素的右侧对齐，据我所见，罗盘不允许这样做。

所需的输出是：

  background-position: right -903px;

我唯一有效的方法是创建一个mixin并明确声明背景文件名和位置：

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

哪个很麻烦而且不太时髦......

有没有人知道如何获得罗盘来做到这一点？我错过了一些明显的东西吗或者有人知道插件吗？

或者，如果有办法控制哪个图像首先添加到地图中（因此也就是spritemap中的顺序），这可以使添加内容变得更加容易......

Answer 1

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

所以，经过太长时间。我已经意识到这样做的超级简单方法。我无法相信我没有早点到达。

对于有这个问题的其他人。它真的很简单。

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

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

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

我希望有人发现这至少有用！

Answer 2

以下适用于所有浏览器

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

100％-value与＆＃34; right＆＃34; -positioning相同。