options.dotSeparator

Type: String

Default value: '_'

A string value that is used as a replacement for . (dot) symbols.

A sister option options.pathSeparator governs the substitution of path separators.

Examples

All examples below assume following source files:

images/tool.16.png
images/tool.32.png

Example #1

Default configuration:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        hide: "images/"
      },
      src: ["images/*.png"],
      dest: "images/icons.png"
    }
  }
})

The generated CSS files will include following CSS classes:

.sprite_tool_16 ...
.sprite_tool_32 ...

'sprite_' is a default CSS class prefix. The rest comes from source file names, where dots are replaced with underscores.

Example #2

With extensions:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        includeExt: true,
        hide: "images/"
      },
      src: ["images/*.png"],
      dest: "images/icons.png"
    }
  }
})

The generated CSS files will include following CSS classes:

.sprite_tool_16_png ...
.sprite_tool_32_png ...

Example #3

With extensions and an alternative dot separator:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        includeExt: true,
        classPrefix: "sprite-",
        dotSeparator: "-",
        hide: "images/"
      },
      src: ["images/*.png"],
      dest: "images/icons.png"
    }
  }
})

The generated CSS files will include following CSS classes:

.sprite-tool-16-png ...
.sprite-tool-32-png ...