2

コンパスのスプライト ジェネレーターを使用すると、ジェネレーターはピクセルに基づいて 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;
            }
        }
    }
}

ピクセルベースのアプローチが最適に機能するように、ジェネレーターが特別な種類の最適化を行う可能性があるため、これは良い考えではないでしょうか?

繰り返しますが、質問は次のとおりです。スプライトの位置がピクセルではなくパーセンテージで生成される CSS を Compass で生成する方法はありますか?

4

1 に答える 1

2

最終的には、すべてのパーセンテージを小数点以下の桁数をゼロにするか、小数点以下 1 桁にすることで解決しました。これはすべてのブラウザで美しく機能します。

奇妙な数の画像を持つスプライト (はっきりさせておきますが、これらのスプライトはすべて同じ幅です) の解決策は、画像を大きくすることです。たとえば、画像に 17 枚のスライドがある場合、画像を拡張して 25 枚をシミュレートし、ブラウザーによって正しくレンダリングされるパーセンテージを作成できます。

于 2014-09-11T01:52:56.330 に答える