指南针 - 精灵图像缩放 [英] Compass - Sprite image scaling

问题描述

我使用Compass创建了一个Sencha Touch网络应用程序。在inline-url，但我的图像是巨大的，所以我正在寻找将它们移动到一个精灵（并重新使用背景大小）。

I'm creating a Sencha Touch web app using Compass. Had a go at inline-url but my images are huge so am looking to move them into a sprite instead (and re-use with background-size).

目前我的内联图像可以缩放，因为它们是单个文件。
Sprites具有在创建sprite时生成的位置。当你使用background-size更改sprite尺寸时，你还需要改变位置。

Currently my inline-images can be scaled because they're a single file. Sprites have positions which are generated upon creation of the sprite. When you change the sprite size using background-size you need to alter the position as well.

是否可以获取sprite的索引？那么我可以说，如果我想它 background-size：50px 和索引是3 background-position为 0 150px;

Is it possible to grab the index of the sprite? Then I can say that if I want it to be background-size: 50px and the index is 3 then the new background-position is 0 150px;

无法看到罗盘存储或获取每个索引项目在精灵。我的图像以'A'开头，所以是文件夹中的第一个，在我的SCSS首先被引用，但它的索引是3，所以我不知道如何工作。

Can't see anything about where compass stores or gets the index of each item in the sprite. My image starts with an 'A' so is the first in the folder, is referenced first in my SCSS but it's index is 3 so I'm not sure how to work this out.

推荐答案

我发现这个，这有助于我：
https://gist.github.com/3410875

I found this, which helped me somehow: https://gist.github.com/3410875

我使用的方式如下：

$logo-spacing: 20px;
@import "logo/*.png";
@include all-logo-sprites;

.logo-brand {
    $spriteName: brand;
    $percentage: 40;

    @include resize-sprite($logo-sprites, $spriteName, $percentage);
}

不知道这是否回答了您的问题。

Not sure if this is answering your question though.

这篇关于指南针 - 精灵图像缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！