Documentation is unclear about how to structure the grunt.js file

[Dan503]

The documentation (https://github.com/twolfson/spritesheet-templates#scss_maps) has this:

Options: functions Boolean - Flag to include mixins or not By default this is true (mixins will be included)

I have no idea how to exclude the mixins based on that :/ I need an example. What do I need to do to this to turn off mixins?

    sprite:{
        all: {
            src: 'assets/images/auto-sprite/source-files/*.png',
            dest: 'assets/images/auto-sprite/auto-spritesheet.png',
            destCss: 'assets/sass/sprites.scss',
            cssFormat: 'scss_maps',
            padding: 2,
            options: {
                mixins: false,
            }
        },
    },

I would like to be able to put the mixins in a different folder to the scss maps.

[Dan503]

Ok I managed to figure that one out but I'm completely stumped on how to alter the spritesheet name now

grunt.initConfig({

    sprite:{
        LowDef: {
            src: 'assets/images/auto-sprite/LowDef-source-files/*.png',
            dest: 'assets/images/auto-sprite/LowDef-autosprite.png',
            destCss: 'assets/sass/00-config-files/LowDef-sprites.scss',
            cssFormat: 'scss_maps',
            imgPath: '../images/auto-sprite/LowDef-autosprite.png',
            padding: 4,
            cssOpts: {
                functions: false,
                spritesheetName: 'lowdef',
            },
        },
        HighDef: {
            src: 'assets/images/auto-sprite/HighDef-source-files/*.png',
            dest: 'assets/images/auto-sprite/HighDef-autosprite.png',
            destCss: 'assets/sass/00-config-files/HighDef-sprites.scss',
            cssFormat: 'scss_maps',
            imgPath: '../images/auto-sprite/HighDef-autosprite.png',
            padding: 4,
            cssOpts: {
                functions: false,
                spritesheetName: 'highdef',
            },
        },
    },

});

It says this in the documentation: spritesheetName String - Prefix to use for all spritesheet variables

I'm making a low definition sprite and a high definition sprite. The only thing holding me back right now is that I can't change the $spritesheet variable name through the grunt file. Anyone that wants to use multiple sprite sheets needs to be able to edit that variable name. Is there already an easy way to do this?

[twolfson]

In spritesheet templates, functions is passed in via formatOpts but spritesheetName is passed in directly as an option. This parallel is carried to grunt-spritesmith via cssOpts and cssSpritesheetName.

You are looking for the cssSpritesheetName option in your grunt-spritesmith config

HighDef: {
    src: 'assets/images/auto-sprite/HighDef-source-files/*.png',
    dest: 'assets/images/auto-sprite/HighDef-autosprite.png',
    destCss: 'assets/sass/00-config-files/HighDef-sprites.scss',
    cssFormat: 'scss_maps',
    imgPath: '../images/auto-sprite/HighDef-autosprite.png',
    padding: 4,
    cssSpritesheetName: 'highdef',
    cssOpts: {
        functions: false,
    },
},

[Dan503]

Thanks for the help, the sprite sheet variable names are being named how I want them now :)

This issue isn't really closed though. The problem is that the documentation for spritesmith wasn't clear enough for me to figure that out on my own.

There are barely any examples across both spritesmith and spritesheet-templates of what the grunt file is supposed to look like when using various features. Could you add a bunch of code snippets with examples of how the grunt file should be structured? I spent hours getting as far as I did trying to decipher your documentation. This is bound to be an issue for other people wanting to use spritesmith but unable to figure out how to use it.

(great work on such a robust grunt plugin by the way. It's so much better than using compass for auto-spriting)

[twolfson]

I understand your frustration. However, creating an example for every option is impractical for both maintenance and reading. The current examples on the README cover the options people use the most. If more people complain about there being a lack of documentation towards this case, then we will add it.

[Dan503]

But I don't see any examples that look somewhat like the example I gave in the original post. That is the standard way of structuring grunt.js code. Anyone new to grunt would be completely and utterly lost trying to follow the examples you are currently providing in the documentation.