css - Compass - Sprite 图像缩放

标签 css sass compass-sass

我正在使用 Compass 创建一个 Sencha Touch 网络应用程序。试过 inline-url,但我的图片很大,所以我希望将它们移到 sprite 中(并重新使用背景大小)。

目前我的内联图像可以缩放,因为它们是单个文件。 Sprite 具有在创建 Sprite 时生成的位置。当您使用 background-size 更改 Sprite 大小时,您也需要更改位置。

是否可以抓取 Sprite 的索引?然后我可以说,如果我希望它是 background-size: 50px 并且 index 是 3 那么新的 background-position 是 0 150px;

看不到关于 compass 在何处存储或获取 sprite 中每个元素的索引的任何信息。我的图像以“A”开头,所以是文件夹中的第一个,在我的 SCSS 中首先被引用,但它的索引是 3,所以我不确定如何解决这个问题。

最佳答案

我找到了这个,它以某种方式帮助了我: 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);
}

但不确定这是否能回答您的问题。

关于css - Compass - Sprite 图像缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12745682/

相关文章:

shell - 安装 compass 时出错。无法构建 gem 原生扩展( compass )

php - HTML, CSS - 我想创建一个按钮 "Preview",它将向用户显示他的输入

css - SVG - 不同 svg 元素上的不同笔画宽度

css - 动态设置div宽度和高度的方法

node.js - 如何使用终端查找 Node-Sass 包中使用的 Sass 版本

css - compass 不编译 Sass map

javascript - 使用带有变换属性的缩放时定位 sibling

html - 使用 Sass 的样式 li 标签不起作用(li 标签的悬停效果)

html - 根据父元素的宽度(SASS)在 SASS 中设置子元素的背景颜色

sass - compass 在同一图标名称下为不同颜色的主题创建多个 Sprite 文件