Css-sprite Use detailed

Perhaps the best use of sprite tools, well, at least I used the best use.

First install Css-sprite, install here is very pit, wait for me to finally say.

The code is as follows:

NPM Install Css-sprite

I use gulp to build the front-end code, so I also need to install Gulp and gulp-if, after the installation is ready to start configuration.

Create a new task:

CSS code copy content to clipboard

var gulp = require (' gulp ');

var gulpif = require (' gulp-if ');

Gulp.task (' Sprites ', function () {

GULP.SRC (' img/icon/*.png ')//This is the path to the picture to be merged

. Pipe (Sprite ({

Name: ' Icon ',//define a title

Style: ' _icon.scss ',//This is the generated style file

Format: ' PNG ', picture in//png format

Orientation: ' left-right ',//sprite diagram merging direction, can also be set to vertical or horizontal

Csspath: ' #{$icon-sprite-path} ',//Sprite chart Path variable

Template: './sprite-tpl.mustache ',//scss generated template

Processor: ' SCSS '//format of the generated style file

}))

. Pipe (Gulpif (' *.png ', gulp.dest (' img/'), Gulp.dest (' css/'));

});

The Scss template uses mustache:

CSS code copy content to clipboard

{{#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}}}

It's just that simple.

Now just want to throw the picture inside the icon folder, run the next gulp sprites, you can generate a sprite icon.png and corresponding scss style file _ ICON.SCSS, you can also create a new listening task, monitor icon folder, so that can be generated in real time.

I posted the _icon.scss:

CSS code copy content to clipboard

$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);

}

Use the time only to add similar class= "icon Icon-qq", it can be.

Css-sprite's address

Now the author has not updated css-sprite, now called sprity, configuration is almost, sprity more functions, have time to introduce.

Now said the opening of the pit, is the installation of the problem, Microsoft's environment is difficult to install success, because rely on LWIP, need to NODE-GYP recompile, my own computer installed, but some colleagues of the computer how to configure the installation is not successful. Mac has not tried, it should be no problem, Windows environment is more fucked up.

If you also encounter installation problems, can be resolved, please inform the next. ：)