options.classPrefix

Type: String Default value: 'sprite_'

A string value that is used as a prefix for generated CSS class names.

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_png ...
.sprite_16x16_help_png ...
.sprite_32x32_tool_png ...
.sprite_32x32_help_png ...

'sprite_' is a default value of this options. The rest comes from source file names.

Example #2

Different prefix:

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

The generated CSS files will include following CSS classes:

.icons-16x16_tool_png ...
.icons-16x16_help_png ...
.icons-32x32_tool_png ...
.icons-32x32_help_png ...

Example #3

No prefix:

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

The generated CSS files will include following CSS classes:

.16x16_tool_png ...
.16x16_help_png ...
.32x32_tool_png ...
.32x32_help_png ...