Open sahibalejandro opened 9 years ago
You can use a template to setup your own output.
Mustache is "logic-less", this can't be done only using basic template tags, it needs an if
with some RegExp validation to detect the -hover
suffix on the image name and then generate the :hover
styles.
Any ideas?
Hopefully you can wait a few more days. In css-sprite 1.0 handlebars is used to generate the style. This will give much more flexibility. So creating a hover style can be achieved more easily. I just need a few more days to finish up all the changes.
Thank you, I'm tuned.
i need this。
gulp.spritesmith do like this:
sprites: {
src: srcAssets + '/images/sprites/icon/*.png',
dest: {
css: srcAssets + '/scss/base/',
image: srcAssets + '/images/sprites/'
},
options: {
cssName: '_sprites.scss',
cssFormat: 'css',
cssOpts: {
cssClass: function (item) {
// If this is a hover sprite, name it as a hover one (e.g. 'home-hover' -> 'home:hover')
if (item.name.indexOf('-hover') !== -1) {
return '.icon-' + item.name.replace('-hover', ':hover');
// Otherwise, use the name as the selector (e.g. 'home' -> 'home')
} else {
return '.icon-' + item.name;
}
}
},
imgName: 'icon-sprite.png',
imgPath: '/assets/images/sprites/icon-sprite.png'
}
}
css-sprite 1.0.0 is out ... it's called sprity. it now uses handlebars as the template language. So more logic is possible whithin the templates. If this is not enough, have a look at How to write a sprity style processor. Let me know if you need more information ...
Thanks, I will check it. On May 13, 2015 6:40 AM, "Alexander Slansky" notifications@github.com wrote:
css-sprite 1.0.0 is out ... it's called sprity https://github.com/sprity/sprity. it now uses handlebars as the template language. So more logic is possible whithin the templates. If this is not enough, have a look at How to write a sprity style processor https://github.com/sprity/sprity/wiki/How-to-write-a-sprity-style-processor. Let me know if you need more information ...
— Reply to this email directly or view it on GitHub https://github.com/aslansky/css-sprite/issues/65#issuecomment-101636224.
Did you ever succeed in doing this?
Using sprite smith, yes.
Is there an option or something to generate :hover states for the sprites?
for example, having
button.png
andbutton-hover.png
generates css:Compass sprite generator has this feature :(