compass-sass - 指南针精灵位置-x

Question

我正在使用指南针精灵助手来定位图标，它在 y 轴上工作，但它位于 x 轴上的 0 处。现在我可以将 x 偏移设置为固定值，但我宁愿将其设置为“正确”。

这是我现在的代码：

background: {
  url: sprite-url($icons-sprite);
  repeat: no-repeat;
  position: sprite-position($icons-sprite, nav-active);
}

这就是我想要实现的目标（伪代码）：

background: {
  url: sprite-url($icons-sprite);
  repeat: no-repeat;
  position: right sprite-position-y($icons-sprite, nav-active);
}

有人对此有解决方案吗？

Answer 1

自动精灵

在创建精灵贴图之前，您必须在精灵贴图的右侧指定您希望精灵拥有的精灵引擎（有关详细信息，请参阅文档）：

$icons-nav-active-position: 100%;
@import "icons/*.png";

sprite-position()然后像往常一样调用该函数：

position: sprite-position($icons-sprite, nav-active);

手动精灵

当您调用 时sprite-map()，您必须传递参数$<map>-<sprite>-position: 100%（其中<map>表示包含您的精灵的文件夹名称）：

$icons-sprite: sprite-map("icons/*.png", $icons-nav-active-position: 100%);
background: {
  url: sprite-url($icons-sprite);
  repeat: no-repeat;
  position: sprite-position($icons-sprite, nav-active);
}

注意 1：您可以传递参数$position: 100%来设置所有精灵的位置。
注意 2： 在Compass 0.12.1 之前，要传递给的参数sprite-map()不以<map>-. 请参阅问题 828。