输出单个碱基cssclass指定background-image

Question

我正在使用 grunt-spritesmith，它会生成一个 css 文件，如下所示：

.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;
}

这很好用。我想要做的是使用一个基础 css class 作为图标来指定 background-image （就像 Compass 所做的那样），所以输出是这样的：

.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;
}

我想知道这是否可能？

Answer 1

您需要使用cssTemplate函数(example)。
一个快速（和肮脏）的实现是 (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;
}

此外，您需要此模板（位于 template 目录中，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}}

这应该可以解决问题。

输出单个碱基cssclass指定background-image

Output a single base css class to specify background-image

css

css-sprites

grunt-spritesmith