compassで質問です。
@import "foooo/*.png";@include all-foooo-sprites;
の書き方でほぼ期待通りの結果が得られるんですがコンパイル後の画像にマージンを設ける事ができません。
sprite-mapには$spacingのオプションがあるのですが同じように設定できないものでしょうか？
質問主です。
$foooo: sprite-map("foooo/*.png", $spacing: 20px);$foooo-sprite-dimensions: true;$class: aaa, bbb, ccc;
@each $i in $class{ .#{$i}{ background:sprite($foooo, #{$i}); @include sprite-dimensions($foooo, #{$i});
&:hover{ background:sprite($foooo, #{$i}_on); @include sprite-dimensions($foooo, #{$i}_on); } }}
↑上記コードでスペースを設けることが出来るんですが問題があります。
できることならall-foooo-spritesですべて完結するのが理想です。
ためしてないですが、スペースは$foooo-spacing: 20px;とかでだめでしょうか？また画像の生成にはoily_pngというgemをインストールすることで、Compassがデフォで使ってるchunky_pngを高速化できるらしいです。
ありがとうございます！
下記の4行で完結しました
$foooo-spacing: 20px;$foooo-sprite-dimensions:true;@import "sprite/foooo/*.png";@include all-foooo-sprites;
みんなの回答 2 件
質問主です。
$foooo: sprite-map("foooo/*.png", $spacing: 20px);
$foooo-sprite-dimensions: true;
$class: aaa, bbb, ccc;
@each $i in $class{
.#{$i}{
background:sprite($foooo, #{$i});
@include sprite-dimensions($foooo, #{$i});
&:hover{
background:sprite($foooo, #{$i}_on);
@include sprite-dimensions($foooo, #{$i}_on);
}
}
}
↑
上記コードでスペースを設けることが出来るんですが問題があります。
できることなら
all-foooo-spritesですべて完結するのが理想です。
ためしてないですが、スペースは$foooo-spacing: 20px;とかでだめでしょうか？
また画像の生成にはoily_pngというgemをインストールすることで、Compassがデフォで使ってるchunky_pngを高速化できるらしいです。
Sprite Customization | Compass Documentation
http://compass-style.org/help/tutorials/spriting/customization-options/関連するトピックス