コンパスによって作成されたすべてのスプライトをスケーリングする標準的な方法はありますか?つまり、必要な解像度の2倍の画像があり、その画像のすべてのスプライトにサイズを設定したいと考えています。現在、ロードされたスプライトを繰り返し処理し、を設定しbackground-size
て変更することで、これを行うことができますbackground-position
。
わかりやすくするために、たとえば、通常のサイズのスプライトを使用している場合は、次のようにします。
@import "settings/*.png";
@include all-settings-sprites;
しかし、ダブルサイズのスプライトを取得するには、次のことを行う必要があります。
@import "icons/*.png";
@include retina-sprites($icons-sprites); // retina sprites
@mixin retina-sprites($map) {
$base-class: sprite-map-name($map);
.#{$base-class}-all-retina-sprites {
background-image: sprite-url($map);
@include background-size(ceil(image-width(sprite-path($map)) / 2) auto);
}
@each $sprite in sprite-names($map) {
.#{$base-class}-#{$sprite} {
@extend .#{$base-class}-all-retina-sprites;
$position: sprite-position($map, $sprite);
background-position: nth($position, 1) nth($position, 2) / 2;
}
}
}
これを行うためのより簡単な、または標準的な方法があることを願っています。標準の定義を使用できないため、CSSファイルの他の場所に個々のスプライトを含めようとすると、問題はさらに悪化します。