2

使用 compass 的 sprite 生成器时，生成器会根据像素创建 CSS 规则。

示例代码：

@import 'compass/utilities/sprites';

$sprite-2-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-2/*.png";
@include all-sprite-2-sprites;

$sprite-3-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-3/*.png";
@include all-sprite-3-sprites;

$sprite-4-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-4/*.png";
@include all-sprite-4-sprites;

示例输出：

/* line 84, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.sprite-2-00 {
  background-position: 0 0;
}

/* line 84, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.sprite-2-00 {
  background-position: -244px 0;
}

有没有一种方法可以按百分比生成这些以便响应地使用它们？

我自己写了，但在某些浏览器中效果不佳。这是我的方法：

@mixin sprite-percentage-step-generate($steps, $single_image_width) {
    $total_image_width: ($single_image_width * $steps) - $single_image_width;
    background-position: 0 0;
    img {
        display: none;
    }
    @for $i from 0 through ($steps - 1) {
        $step_width: $i * $single_image_width;
        &.step-#{$i} {
            background-position: percentage(($step_width / $total_image_width)) 0;
            // We include these to see the relation between the percentage and the step count
            img {
                display: none;
            }
        }
    }
}

也许这不是一个好主意，因为生成器可能会进行一些特殊的优化，以便基于像素的方法效果最好？

同样，问题是：有没有办法让 Compass 生成 CSS，其中精灵的位置生成为百分比而不是像素？

4

1 回答 1

2

最后，解决方案是使所有百分比都没有小数位或小数点后一位。这适用于所有浏览器。

对于具有奇怪数量图像的精灵（让我澄清一下，这些精灵都是相同的宽度），解决方案是使图像更大。例如，如果图像有 17 张幻灯片，则可以将图像扩展为模拟 25 张，从而创建浏览器正确呈现的百分比。

于 2014-09-11T01:52:56.330 回答