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

【问题标题】：Converting from width to background-width in Less for sprites within CSS class在 CSS 类中的精灵从宽度转换为背景宽度
【发布时间】：2013-11-26 19:37:10
【问题描述】：

我是高级 CSS 的新手，我一直关注 this tutorial 使用 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;
}

问题是在这个阶段我找不到一种方法来获得宽度和高度以表示为background-width和background-height，即我想去的地方。

我尝试更改 sprite.less 文件中的值以匹配我正在寻找的内容，但发现这是一个不起作用的 hack。我一直在考虑的另一个选择是使用 mixin 来返回正确的项目并转换宽度，但是因为这些是从 less 生成的，所以我也无法让它飞起来。

【问题讨论】：

标签： css less gruntjs

【解决方案1】：

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

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

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

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

【讨论】：