輸出單個基本CSS類以指定背景圖像

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類來指定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函數（ 示例 ）。
一個快速（又骯臟）的實現是（ 基於此 ）：

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目錄中）：

{{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}}

這應該可以解決問題。