为CSS类中的精灵在Less中从宽度转换为背景宽度

Question

我是高级CSS的新手，我一直在学习本教程中使用gruntjs、spritesmith等生成精灵。我纠结于如何解决下面的问题。首先，我生成了一个.less文件，其中包含精灵中每个图像的信息。它看起来像这样：

  @mobile_logout-x: 1586px;
  @mobile_logout-y: 0px;
  @mobile_logout-offset-x: -1586px;
  @mobile_logout-offset-y: 0px;
  @mobile_logout-width: 256px;
  @mobile_logout-height: 256px;

使用grunt contrib less，我现在可以使用以下方法将精灵放入我的目标css：

更少的模板

.mobile_logout {
    .sprite(@mobile_logout);
}

结果

.mobile_logout {
  background-image: url(images-mobile/mobile-sprite.png);
  background-position: -1586px 0px;
  width: 256px;
  height: 256px;
}

如果我想直接在HTML中使用它，这是可以的，但我想将其指定为另一个CSS类的一部分。例如：

.myTestButton {
  background-image: url(images-mobile/mobile-sprite.png);
  background-position: -1586px 0px;
  width: 256px;
  height: 256px;
  color: white;
  background-size: 1.3em 1.3em;
  background-position: top right;
}

问题是在这个阶段，我找不到一种方法来将宽度和高度表示为背景宽度和后台高度，这就是我想要达到的目标。

我尝试过更改sprite.less文件中的值以匹配我想要的内容，但发现这是一个无效的破解方法。我一直在考虑的另一个选项是使用mixin来返回正确的项目并翻译宽度，但由于这些项目是从less生成的，我也无法实现。

Answer 1

发布后，我查看了sprite函数的来源，并在生成的sprite.less文件中找到了答案：

  .sprite-width(@sprite) {
    width: ~`"@{sprite}".split(', ')[4]`;
  }
  .sprite-height(@sprite) {
    height: ~`"@{sprite}".split(', ')[5]`;
  }

sprite.less文件是使用胡子模板生成的。为了解决我在Spritesmith中的问题，你可以指定一个胡子模板。我在看背景宽度，而我需要的属性是背景大小，这也是不正确的。我的内联尝试也失败了，我应该考虑使用div，而不是调整sprite组件的大小。