CODEWITHSUNDEEP
csscss-spritesgrunt-spritesmith
user3970044
user3970044

Reputation:

Output a single base css class to specify background-image

I am using grunt-spritesmith and it generates a css file such as this:

.icon-admin {
  background-image: url(../sprites/spritesheet.png);
  background-position: -288px -856px;
  width: 37px;
  height: 32px;
}
.icon-report {
  background-image: url(../sprites/spritesheet.png);
  background-position: -256px -888px;
  width: 26px;
  height: 28px;
}

This works fine. What I want to do is to use a base css class for icons for specifying the background-image (like what Compass does), so the output is like this:

.icon {
  background-image: url(../sprites/spritesheet.png);
}
.icon-admin {
  background-position: -288px -856px;
  width: 32px;
  height: 32px;
}
.icon-report {
  background-position: -256px -888px;
  width: 24px;
  height: 24px;
}

I wonder if this is possible?

Upvotes: 0

Views: 441

Answers (1)

Omid Kamangar
Omid Kamangar

Reputation: 5788

You need to use the cssTemplate function (example).
A quick (and dirty) implementation would be (based on this):

cssTemplate: function(params) {
  var fs = require('fs'),
    mustache = require('mustache'),
    tmpl = fs.readFileSync(__dirname + '/template/css.template.mustache', 'utf8'),
    items = params.items,
    options = params.options;

  // Fallback class naming function
  var classFn = options.cssClass || function defaultCssClass (item) {
        return '.icon-' + item.name;
      };

  // Add class to each of the options
  items.forEach(function saveClass (item) {
    item['class'] = classFn(item);
  });
  // Set the default class
  options.cssClass = options.cssClass || '.icon';

  // Render and return CSS
  var css = mustache.render(tmpl, params);
  return css;
}

Also, you need this template (placed inside a template directory, based on this):

{{options.cssClass}} {
  background-image: url({{{spritesheet.escaped_image}}});
}

{{#items}}
{{class}} {
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/items}}

This should do the trick.

Upvotes: 0

Related Questions