CSS Sprite小画像自動マージツール

css-spriteはcssスタイルの中の零細な小さなアイコンであり、小さな画像を大きな図にまとめて表示することで、サーバの同時接続数を減らし、サーバの負荷と帯域幅の使用を減らすことができ、高い実用価値がある.ここでは、画像を自動的にマージしてスタイルを生成するツールについて説明します.

NodeJS  css-sprite

css-spriteはNodeJSに基づいて実現されたcssカット自動合成ツールであり、小さな画像を自動的に大きな図に合成することができ、retina spritesとbase 64の出力フォーマットをサポートする.注*retina sprites網膜スクリーンとは、人間の目が直感的に感じることができる基礎色素レベルに近い出力フォーマットを指す.Base 64は、画像をBase 64文字列に変換してCSSファイルに埋め込むものである.
インストール
注意*テスト0.9.0は、Winodwsで正常にインストールできます.

npm install [email protected]

使用する場合はjsファイルを作成する必要があります.このjsプログラムは、web/iconディレクトリのpngアイコンをweb/imgにマージし、web/css/iconsを生成します.cssスタイルファイル

var sprite = require('css-sprite');
sprite.create({
  src       : ['web/icon/*.png'],  //       
  out       : 'web/img',           //       
  name      : 'icons',             //     
  style     : 'web/css/icons.css', //    
  prefix    : 'icon',   //    
  processor : 'css',    //    ： css;   less,sass,scss,stylus       
  cssPath   : '../img', //css              
  margin    : 10        //    ，      
}, function () {
  console.log('done');
});

出力されるファイルは次のようになります.

.icon {
  background-image: url('../img/icons.png');
}

.icon-first {
  background-position: -10px -44px;
  width: 20px;
  height: 20px;
}

.icon-last {
  background-position: -10px -84px;
  width: 20px;
  height: 20px;
}

css-spriteはnodeに基づく.jsとnpmは、拡張性が高く、この出力フォーマットが欲しくない場合はmustcacheのcssテンプレート設定を変更できます:node_modules\css-sprite\lib\templates\css.mustache

{{#items}}
{{class}} {
  background-image: url('{{{escaped_image}}}.png');
  background-position: {{px.offset_x}} {{px.offset_y}};
}
{{/items}}

出力は次のようになります.

.icon-account {
  background-image: url('../img/icons.png');
  background-position: -10px -10px;
}
.icon-dashboard {
  background-image: url('../img/icons.png');
  background-position: -10px -54px;
}

自動マージされた画像を使用したくないiconアイコンがある場合は、自動マージされたアイコンスタイルごとに画像アドレスを書き換えるのが便利です.
css-spriteはcssなど多くのCSS拡張スタイル言語をサポートしています.
less, sass、scssまたはstylus、例えば出力がscssに設定されている場合(「processor:scss」)の使用:

@import 'sprite'; //        scss   (sprite.sc ss)



// camera    ($camera         camera.png   )
.icon-camera {

  @include sprite($camera);

}



// cart    (       cart.png   )
.icon-cart {

  @include sprite($cart);

}

css-spritesサポート可能
Gulp/Grunt構築ツール拡張、カスタム出力テンプレートなどもサポートでき、機能は豊富ですが、新しいため不安定なバージョンもあります.また、このツールでサポートされている出力フォーマットは多すぎて、コンパクトではなく、パッケージファイルが大きいです.
注*Nodeに基づく.JSの画像合成ツールはいくつかありますが、サードパーティの画像処理ライブラリに依存することが多いです.