How do I change the delimiter in variables' names?

[denisz1]

In the generated LESS stylesheet, I get something like this:

// ...
@mysprite-x: 0px;
@mysprite-y: 0px;
// ...

And I want an underscore for all variables, not a dash, like this:

// ...
@mysprite_x: 0px;
@mysprite_y: 0px;
// ...

There are lots of customisation and template options, but I can't find one for the "delimiter"? We are on windows and the underscore is used for constants (and so our build/CI tools complain!).

So in other words, how to I adapt this from less.template.mustache:

{{#items}}
@{{name}}-name: {{name}};
@{{name}}-x: {{px.x}};
@{{name}}-y: {{px.y}};
@{{name}}-offset-x: {{px.offset_x}};
@{{name}}-offset-y: {{px.offset_y}};
@{{name}}-width: {{px.width}};
@{{name}}-height: {{px.height}};
// etc

[denisz1]

Actually, I'm not sure if this is a question for this project, or the main gulp.spritesmith project?...

[twolfson]

This is the proper location as it's used by most projects on top of spritesmith (e.g. grunt-spritesmith). We will need to think about this further because we should add functionality that also supports camelCase, TitleCase, and any other potential casing. My gut reaction is to leverage underscore.string somehow.

http://epeli.github.io/underscore.string/

For the interim, you can use a custom template via cssTemplate in gulp.spritesmith.

https://github.com/twolfson/gulp.spritesmith/tree/2.5.1#spritesmithparams

[denisz1]

I wrote a post-build script to edit the less files... ugly but works for now.

Your way's better though. Hope there will be an option for this sometime in the future.

[twolfson]

Alright, we have added in support for altering variable names via underscore.string. This was released in spritesheet-templates@8.3.0 and will be released in grunt-spritesmith/gulp.spritesmith shortly.

For your usage, you will want:

// In your `gulpfile.js`
/* imgName, cssName, ... */
cssOpts: {
  variableNameTransforms: ['underscored']
}

[twolfson]

This has been temporarily reverted in the latest verions of grunt-spritesmith/gulp.spritesmith as I introduced it as a minor version which broke existing usages. It can still be accessed via

grunt-spritesmith@3.7.0 or gulp.spritesmith@2.6.0

There should be a major release shortly (once I get these HTTP fixtures back in) which adds it back.

[twolfson]

This has been re-introduced in spritesheet-templates@9.0.0, grunt-spritesmith@4.0.0, and gulp.spritesmith@3.0.0. Thanks for your patience =)

[denisz1]

@twolfson This works great, thanks!

...And so many options, awesome!