Question

我是高级CSS的新手，我一直关注this tutorial使用gruntjs，spritesmith和less生成精灵。我坚持如何解决以下问题。首先，我生成一个.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我现在可以使用以下内容将sprite放入我的目标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文件中的值以匹配我正在寻找的值，但是发现这是一个无法正常工作的黑客。我一直在考虑的另一个选择是使用mixin来返回宽度已翻译的正确项目，但因为这些是从较少生成的，所以我也无法使其飞行。

Answer 1

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

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

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

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

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

1 个答案: