search

twolfson / grunt-spritesmith

Grunt task for converting a set of images into a spritesheet and corresponding CSS variables
MIT License
1.14k stars 92 forks source link

Custom less variables with hdpi @2x images name #36

Closed Orion98MC closed 11 years ago

Orion98MC commented 11 years ago

Hi, I noticed that for .css format it's possible to alter the class names using cssOpts. However is it possible to do the same for the generated less @variables? I'm using hidpi images with "@2x" in their names which makes a lessc error.

Regards, Thierry

twolfson commented 11 years ago

Currently, it is not. I think the solution for this will be an option for mapping original sprite names to CSS names.

{
  cssVarName: function (sprite) {
    return sprite.name.replace('@', '-');
  }
}
twolfson commented 11 years ago

As an interim workaround, you can use a grunt rename task to rename all hdpi images to something more tolerable and load those into spritesmith.

twolfson commented 11 years ago

Adding functionality now. Should be ready in a bit.

twolfson commented 11 years ago

Alright, I decided to make it more generic and added the cssVarMap option. Your config should look like:

{
  cssVarMap: function (sprite) {
    sprite.name = sprite.name.replace('@', '-');
  }
}

More info can be found in the README. This has been released in 1.11.0.

Orion98MC commented 11 years ago

Great thanks, I kinda did something similar in the meantime but It's great to see you had the time to do it. For the record I also adapted json2css and the less template for HiDPI images if you are interested in the changes I can fork and submit a pull request.

twolfson commented 11 years ago

I would be open to adding some hi-res templates to json2css. Although, spritesmith was not built with retina in mind, it would lower the barrier for someone to create a hi-res tool on top of spritesmith that takes care of the nuances and allows for switching strategies of how to approach retina.

twolfson commented 9 years ago

As a heads up, we have added retina support in grunt-spritesmith@4.5.0. More information can be found here:

https://github.com/Ensighten/grunt-spritesmith#retina-parameters

https://github.com/Ensighten/grunt-spritesmith#retina-spritesheet

Orion98MC commented 9 years ago

Great! Thanks for the heads up. Can't wait to use it in a future development.