css - 如何在compas sass中生成精灵位置，例如“右-300px”？

Question

如何在compas sass中生成精灵位置，例如“右-300px”？
我发现sass只能输出数字的背景位置，但有时我需要精灵位置右对齐或下对齐，怎么做？
请在下面查看我的代码：

<style type="text/css">
    /* ------- scss ------- */
    $map_btn: sprite-map("sprite_btn/*.png");
    .btn,.btn span{
        display:inline-block;
        background-image: sprite-url($map_btn);
        background-repeat: no-repeat;
    }
    .go_to_cart{
        background-position: sprite-position($map_btn,go_to_cart);
        span{
            background-position: sprite-position($map_btn,go_to_cart);
        }
    }

    /* ------- output ------- */
    .btn,.btn span{
        display:inline-block;
        background-image: url('../images/btn_sprite.png');
        background-repeat: no-repeat;
    }
    .go_to_cart{
        background-position: 0 -300px;
    }
    .go_to_cart span{
        background-position: 0 -330px;
        /* ------- 
            but I want to output like this bellow:
            how to write in scss?
        ------- */
        background-position: right -330px;
    }

</style>
<a href="#" class="btn go_to_cart">
    <span></span>
</a>

Answer 1

这是一个老问题，但以防万一有人需要答案。

使用精灵贴图时，您不能（或不应该）像那样对齐背景，因为您基本上是在偏移范围并破坏了精灵贴图的目的。

如果你想对齐精灵，你应该定位/对齐精灵的容器。