Multiples sprite tasks using less

[danielmariz]

similar to this issue: https://github.com/Ensighten/grunt-spritesmith/issues/93

I need two tasks like that

icons:{
        src: '<%= scaffold.dev.assets %>/img/icons/*.png',
        destImg: '<%= scaffold.dev.assets %>/img/sprite-icons.png',
        destCSS: '<%= scaffold.dev.assets %>/less/sprite-icons.less',
        cssFormat: 'less',
        cssVarMap: function (sprite) {
            // `sprite` has `name`, `image` (full path), `x`, `y`
            //   `width`, `height`, `total_width`, `total_height`
            // EXAMPLE: Prefix all sprite names with 'sprite-'
            sprite.name = sprite.name;
          },
    },
    backgrounds:{
        src: '<%= scaffold.dev.assets %>/img/backgrounds/*.png',
        destImg: '<%= scaffold.dev.assets %>/img/sprite-backgrounds.png',
        destCSS: '<%= scaffold.dev.assets %>/less/sprite-backgrounds.less',
        cssFormat: 'less',
        cssVarMap: function (sprite) {
            // `sprite` has `name`, `image` (full path), `x`, `y`
            //   `width`, `height`, `total_width`, `total_height`
            // EXAMPLE: Prefix all sprite names with 'sprite-'
            sprite.name = sprite.name;
          },
    }

But when I generate those less files I have the same less functions

.sprite-width(@sprite) {
  width: ~`"@{sprite}".split(', ')[4]`;
}

.sprite-height(@sprite) {
  height: ~`"@{sprite}".split(', ')[5]`;
}

.sprite-position(@sprite) {
  @sprite-offset-x: ~`"@{sprite}".split(', ')[2]`;
  @sprite-offset-y: ~`"@{sprite}".split(', ')[3]`;
  background-position: @sprite-offset-x  @sprite-offset-y;
}

.sprite-image(@sprite) {
  @sprite-image: ~`"@{sprite}".split(', ')[8].slice(1, -2)`;
  background-image: url(@sprite-image);
}

.sprite(@sprite) {
  .sprite-image(@sprite);
  .sprite-position(@sprite);
  .sprite-width(@sprite);
  .sprite-height(@sprite);
}

How can I customize thos functions names?

[twolfson]

The LESS functions are not unique to the variables and serve the same purpose. There should be no issue by having multiple copies of them. If you want to hide a set, then they can be disabled via cssOpts:

'my-task': {
  // src, destImg, ..
  cssOpts: {
    functions: false
  }
}

https://github.com/Ensighten/grunt-spritesmith/tree/2.20.0#usage

If you would really like to have the different names for the same functions though, this can be done via generating a new template and loading it via cssTemplate:

'my-task': {
  // src, destImg, ..
  cssTemplate: 'my/custom/less/template.less'
}

https://github.com/Ensighten/grunt-spritesmith/tree/2.20.0#usage

[danielmariz]

Thank you

[danielmariz]

@twolfson Do you know if is there a way to auto generate all classes pattern for all sprites?

Something like

for all @icon-* .icon-[item]{ .sprite(@icon-[item]); } end for

[twolfson]

The CSS template is built for this. Moving to a .css extension will change the generated content's template.

https://github.com/twolfson/json2css/blob/5.2.1/test/expected_files/css.css

destCSS: '<%= scaffold.dev.assets %>/less/sprite-icons.css',

[twolfson]

In 3.5.0 we have added spritesheet variables. The spritesheet-sprites variable references each sprite in order and can be iterated in that fashion. Please see the included sprites mixin in your generated output for a template to work from.

Here is an example output:

https://github.com/twolfson/spritesheet-templates/blob/8.2.0/test/expected_files/less.less#L47-L51

https://github.com/twolfson/spritesheet-templates/blob/8.2.0/test/expected_files/less.less#L90-L103