options.includeExt

Type: Boolean Default value: false

A boolean value that indicates if an image file's extension should be included in a generated CSS class name.

Usually this flag is used when sources include files with the same names but different extensions. If extensions are not included, then generated CSS classes may accidentally collide.

Examples

All examples below assume following source files:

images/icons/16x16/tool.png
images/icons/16x16/help.png
images/icons/32x32/tool.png
images/icons/32x32/help.png

Example #1

Default configuration:

grunt.initConfig({
  tight_sprite: {
    // describe my sprite
    icons: {
      cwd: "images/icons",
      src: ["**/*.png"],
      dest: "images/icons.png"
    }
  }
})

The generated CSS files will include following CSS classes:

.sprite_16x16_tool ...
.sprite_16x16_help ...
.sprite_32x32_tool ...
.sprite_32x32_help ...

Example #2

Include image file's extensions, while generating CSS class names:

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

The generated CSS files will include following CSS classes:

.sprite_16x16_tool_png ...
.sprite_16x16_help_png ...
.sprite_32x32_tool_png ...
.sprite_32x32_help_png ...