Home > javascript > grunt-spritesmith でカスタマイズCSSファイルに差し替える

grunt-spritesmith でカスタマイズCSSファイルに差し替える

  • Posted by: master
  • javascript

既定のままだと background が repeat される

grunt-spritesmith は compass の sprite と違い都度コンパイルしないので便利な点、デフォルトのままだと CSS が background-repeat のまま書き出されてしまいます。

そこで grunt-spritesmith では別途CSSルールを指定出来るオプションがありますので自分の好きなルールのファイルを作成し bacground を no-repeat にする事も出来ます。

サンプル例

ほぼデフォルト通りですが、最後に個別に指定しています。

{
  'functions': true
}

{{#items}}
${{name}}_x : {{px.x}};
${{name}}_y : {{px.y}};
${{name}}_offset_x : {{px.offset_x}};
${{name}}_offset_y : {{px.offset_y}};
${{name}}_width : {{px.width}};
${{name}}_height : {{px.height}};
${{name}}_total_width : {{px.total_width}};
${{name}}_total_height : {{px.total_height}};
${{name}}_image : '{{{escaped_image}}}';
${{name}} : {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}';
{{/items}}

{{#options.functions}}
  @mixin sprite-width($sprite) {
    width: nth($sprite, 5);
  }

  @mixin sprite-height($sprite) {
    height: nth($sprite, 6);
  }

  @mixin sprite-position($sprite) {
    $sprite-offset-x: nth($sprite, 3);
    $sprite-offset-y: nth($sprite, 4);
    background-position: $sprite-offset-x  $sprite-offset-y;
  }

  @mixin sprite-image($sprite) {
    $sprite-image: nth($sprite, 9);
    background-image: url(#{$sprite-image});
  }

  @mixin sprite($sprite) {
    @include sprite-image($sprite);
    @include sprite-position($sprite);
    background-repeat:no-repeat;
  }
{{/options.functions}}

後は Gruntfile.js にオプションとして grunt-spritesmith のところから cssTemplate: 'hoge.txt' みたいな形で指定してあげればサンプルファイルのCSSルールで書き出してくれます。

Comments:0

コメントする

Home > javascript > grunt-spritesmith でカスタマイズCSSファイルに差し替える

Search

Feeds

Return to page top