Css rule optimization

[klierik]

Hello there.

Thanks you for your module. It very good alternative grunt-compile module.

But a have some problem with CSS optimisation.

By default module generate CSS like:

.icons-add-group-24:before {
    width: 24px;
    height: 24px;
    line-height: 24px;
    background-image: url(../../images/icons.png);
    background-position: -40px -96px
    }

.icons-add-group-24_white:before {
    width: 24px;
    height: 24px;
    line-height: 24px;
    background-image: url(../../images/icons.png);
    background-position: -108px -96px
    }

.icons-bookbark_small_blue:before {
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-image: url(../../images/icons.png);
    background-position: -150px -102px
    }

and my mustache file is

[class^="icons-"]:before,
[class*=" icons-"]:before {
    display: inline-block;
    margin-top: -1px;
    *margin-right: .3em;

    content: '';
    line-height: 16px;
    vertical-align: middle;

    background-repeat: no-repeat;
}

{{#items}}
.icons-{{name}}:before {
    width: {{px.width}};
    height: {{px.height}};

    line-height: {{px.height}};

    background-image: url({{{image}}});
    background-position: {{px.offset_x}} {{px.offset_y}};
}
{{/items}}

So, i don't need for each icon entry background-image: url(../../images/icons.png);
I want set background-image: url(../../images/icons.png); only one time for [class^="icons-"]:before, [class*=" icons-"]:before only and make css file more clearly.

Is it possible todo that?

Thanks

[twolfson]

Currently the data is only available via each of the items (e.g. items[0].image). I have been tossing around the idea of adding a spritesheet-sprites variable to make iteration easy and I guess adding spritesheet-* would be fitting (e.g. image, height, width).

For now, some possibilities are:

• Hardcode the background-image into your template as it is custom
• Change to a templating language that allows for accessing the first element (e.g. walrus)
• Change to a CSS preprocessor to handle the same data (e.g. LESS, SASS)

[twolfson]

In grunt-spritesmith@3.4.0, we have added the spritesheet variable to custom templates. For your usage, you should be able to use:

[class^="icons-"]:before {
  background-image: url({{spritesheet.image}});
}

More info can be found in the README:

https://github.com/Ensighten/grunt-spritesmith/tree/3.4.0#templating

[klierik]

Thank you very-very much! It`s very helpful! Awesome! Thanks!

But, after compile, it`s some error in path:

[class^="sprite-"]:before,
[class*=" sprite-"]:before {
    display: inline-block;
    margin-top: -1px;
    *margin-right: .3em;

    content: '';
    line-height: 16px;
    vertical-align: middle;

    background-image: url(../../images/sprites.png);
    background-repeat: no-repeat;
}

:(

[twolfson]

Ah, sorry. That should be 3 braces; we are using mustache which HTML escapes for 2 =/

background-image: url({{{spritesheet.image}}});

[klierik]

Thanks you a lot! Perfect :)

[hdwills]

Change to a CSS preprocessor to handle the same data (e.g. LESS, SASS)

1. The custom template I can't option it, so I rewrite the node_modules\grunt-spritesmith\node_modules\spritesheet-templates\lib\templates\scss.template.handlebars.

   {{#block "sprites-imageurl"}}
   i[class*="-ipad-"] {
       background-image: url({{{spritesheet.image}}});
         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
               background-image: url({{{retina_spritesheet.image}}});
         }
   }
   {{/block}}

2. delete about name_image options and mixin sprite-image($sprite) in scss.template.handlebars, scss_retina.template.handlebars.

3. Grunt task

   // Spritesheet making utility
   sprite: {
     front: {
       src: '<%= config.src %>/images/sprites/*.png',
       retinaSrcFilter: '<%= config.src %>/images/sprites/*@2x.png',
       dest: '<%= config.src %>/images/sprites.png',
       retinaDest: '<%= config.src %>/images/sprites-2x.png',
       destCss: '<%= config.src %>/sass/_sprites.scss',
       cssVarMap: function (sprite) {
         sprite.name = 'icons-ipad-' + sprite.name;
       }
     }
   }

4. now compiled, it's looks ok. but it rewrite the default template. I want to use custom template.
   

This is the same question and I'm want to ask. Thanks! Output a single base css class to specify background-image

[twolfson]

@hdwills Custom templates can be set via cssTemplate and more detailed documentation can be found here:

https://github.com/Ensighten/grunt-spritesmith/tree/6.3.1#templating

https://github.com/Ensighten/grunt-spritesmith/tree/6.3.1#handlebars-template