css - 如何在 compas sass 中生成 sprite 位置，例如 "right -300px"？

Question

如何在compas sass中生成sprite位置如“right -300px”？
我发现sass只能输出数字的背景位置，但有时我需要 Sprite 位置右对齐或底部对齐，怎么办？
请在下面查看我的代码:

<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

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

当使用 sprite 贴图时，你不能(或不应该)像那样对齐背景，因为你基本上是在偏移范围并且违背了 sprite 贴图的目的。

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