web-dev-qa-db-ja.com

コンパス：スプライトを生成し、さらにスプライト内の各画像の幅/高さを生成します

Compass（CSSフレームワーク）を使用してスプライト画像を生成しています。それは機能しますが、コンパスは各画像の背景位置のみを生成します。

スプライトの各画像の幅と高さも取得できますか？

これは私のコードです：

@import "ico/*.png";
@include all-ico-sprites;

生成されたコード：

.ico-Sprite, .ico-bag-blue, .ico-bag-black {
  background: url('../images/ico-s78b1a1919b.png') no-repeat;
}

.ico-bag-blue {
  background-position: 0 0;
}

.ico-bag-black {
  background-position: 0 -24px;
}

そして私が欲しいコード：

.ico-Sprite, .ico-bag-blue, .ico-bag-black {
  background: url('../images/ico-s78b1a1919b.png') no-repeat;
}

.ico-bag-blue {
  background-position: 0 0;
  width:40px;
  height:24px;
}

.ico-bag-black {
  background-position: 0 -24px;
  width:44px;
  height:30px;
}

誰かが私にそれを行う方法を説明できますか？ありがとう。

csscss-spritescompass-sasssass
32
Etienne

これは機能します：

@include all-<map>-sprites(true);

ただし、構成変数を使用する文書化された方法を検討することをお勧めします。
http://compass-style.org/help/tutorials/spriting/

インポートする前にconfig変数を指定するだけです。あなたの場合：

$ico-Sprite-dimensions: true;
@import "ico/*png".
@include all-ico-sprites;

trueをすべてのインクルードに送信することはできますが、文書化されていないため、構成変数が推奨される方法のようです。

寸法の他に、これらは利用可能な他の構成変数です。

$<map>-spacing           // space in px around the sprites
$<map>-repeat            // whether to repeat the Sprite bg
$<map>-position          // the x position of the Sprite on the map
$<map>-Sprite-base-class // the base class (default ".<map>-Sprite")
$<map>-clean-up          // whether to delete old image maps
$<map>-<Sprite>-spacing  // spacing, for individual sprites
$<map>-<Sprite>-repeat   // repeat, for individual sprites
$<map>-<Sprite>-position // position, for individual sprites
74
numbers1311407

私は解決策を見つけました。 2番目の引数としてtrueを渡すだけです：

@include all-ico-sprites(true);

非常に単純に。

7
Etienne