スプライト ツール css-sprite guide_html/css_WEB-ITnose

おそらく最高のスプライト ツール、少なくとも私が今まで使った中で最高のものです。

最初に css-sprite をインストールします。インストールは非常に難しいので、最後に説明します。

npm install css-sprite

フロントエンド コードのビルドに gulp を使用するため、gulp と gulp-if もインストールする必要があります。インストール後、設定を開始できます。
新しいタスクを作成します:

var gulp = require('gulp');var gulpif = require('gulp-if');gulp.task('sprites',function(){    gulp.src('img/icon/*.png')                  //这是要合并的图片的路径        .pipe(sprite({            name: 'icon',                       //定义一个名称            style: '_icon.scss',                //这是生成的样式文件            format: 'png',                      //png格式的图片            orientation: 'left-right',          //雪碧图合并的方向，也可以设置成垂直或水平            cssPath: '#{$icon-sprite-path}',    //雪碧图的路径变量            template: './sprite-tpl.mustache',  //scss生成的模板            processor: 'scss'                   //生成的样式文件的格式        }))        .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));});

scss テンプレートにMustacheを使用します:

{{#items}}    ${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};{{/items}}@mixin sprite-width($sprite) {width: nth($sprite, 3);}@mixin sprite-height($sprite) {height: nth($sprite, 4);}@mixin sprite-position($sprite) {$sprite-offset-x: nth($sprite, 1);$sprite-offset-y: nth($sprite, 2);background-position: $sprite-offset-x  $sprite-offset-y;}@mixin sprite($sprite) {@include sprite-position($sprite);@include sprite-width($sprite);@include sprite-height($sprite);}{{#sprite}}    {{class}} {    background-repeat: no-repeat;    overflow: hidden;    border: none;    background: url('{{{escaped_image}}}?v=#{$version}');    @include inline-block();    vertical-align: middle;    font-style: normal;    color:$icon-font-color;    }{{/sprite}}{{#items}}    .{{name}}{    @include sprite(${{name}});    }{{/items}}

完了!それはとても簡単です。

これで、画像をアイコン フォルダーに放り込み、gulp スプライトを実行してスプライト画像 icon.png と対応する scss スタイル ファイル _icon.scss を生成するだけで済みます。また、新しい監視タスクを作成し、アイコン フォルダーを監視することもできます。リアルタイムで生成できるようになります。

_icon.scss を投稿しました:

$icon-qq: -262px -161px 60px 60px;$icon-email: -332px -161px 60px 60px;$icon-skype: -5px -252px 60px 60px;$icon-phone: -75px -252px 60px 60px;@mixin sprite-width($sprite) {width: nth($sprite, 3);}@mixin sprite-height($sprite) {height: nth($sprite, 4);}@mixin sprite-position($sprite) {$sprite-offset-x: nth($sprite, 1);$sprite-offset-y: nth($sprite, 2);background-position: $sprite-offset-x  $sprite-offset-y;}@mixin sprite($sprite) {@include sprite-position($sprite);@include sprite-width($sprite);@include sprite-height($sprite);}.icon {    background-repeat: no-repeat;    overflow: hidden;    border: none;    background: url('#{$icon-sprite-path}/icon.png?v=#{$version}');    @include inline-block();    vertical-align: middle;    font-style: normal;    color:$icon-font-color;}.icon-qq{    @include sprite($icon-qq);}.icon-email{    @include sprite($icon-email);}.icon-skype{    @include sprite($icon-skype);}.icon-phone{    @include sprite($icon-phone);}

使用する場合は、class="icon icon-qq" などを追加するだけです。

css-sprite のアドレス
現在は css-sprite と呼ばれていますが、sprity には同様の機能がいくつかあります。

さて、冒頭で述べたインストールの問題について話しましょう。lwip に依存しており、node-gyp を再コンパイルする必要があるため、Microsoft 環境に正常にインストールするのは困難です。私自身のコンピュータではインストールされています。同僚のコンピュータを設定するにはどうすればよいですか? インストールが失敗しました。 Mac ではまだ試していないので、Windows 環境は問題ないと思います。

インストールの問題が発生し、それを解決できる場合は、お知らせください。 :)