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: {
    icons: {
      options: {
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.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 ...

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

Example #2

Different prefix:

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

The generated CSS files will include following CSS classes:

.icons-16x16_tool ...
.icons-16x16_help ...
.icons-32x32_tool ...
.icons-32x32_help ...

Example #3

No prefix:

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

The generated CSS files will include following CSS classes:

.16x16_tool ...
.16x16_help ...
.32x32_tool ...
.32x32_help ...