这个LESS精灵简写规范中的参数是什么?

Question

我对LESS相当陌生，我有一些代码——似乎可以工作——给我一个看起来像这样的精灵。首先，变量定义如下:

@my_img: 0px 105px 0px -105px 22px 22px 44px 150px 'sprites/sprite-img.png';

这个变量的用法如下:

.someClass {
      .sprite(@my_img);
}

CSS输出如下:

.someClass{
    background-image: url("sprites/sprite-img.png");
    background-position: 0 -105px;
    height: 22px;
    width: 22px;
}

变量定义中的参数表示什么?最后一个(url)很明显，我相信从精灵来看，第三和第四个似乎是背景位置偏移(X和Y)。这个变量中的9个元素分别表示什么?

1. ?
2. ?
3. 水平位置
4. 垂直位置
7. ?
8. ?
<
9. 背景图像url/gh>

Answer 1

对其他答案的评论有助于明确.sprite的使用实际上不是LESS的一部分，而是一个mixin定义，如下所示。所以变量定义中的额外内容根本不会在精灵中使用，而是用于其他用途。

  .sprite-width(@sprite) {
    width: ~`"@{sprite}".split(', ')[4]`;
  }
  .sprite-height(@sprite) {
    height: ~`"@{sprite}".split(', ')[5]`;
  }
  .sprite-position(@sprite) {
    @sprite-offset-x: ~`"@{sprite}".split(', ')[2]`;
    @sprite-offset-y: ~`"@{sprite}".split(', ')[3]`;
    background-position: @sprite-offset-x  @sprite-offset-y;
  }
  .sprite-image(@sprite) {
    @sprite-image: ~`"@{sprite}".split(', ')[8].slice(1, -2)`;
    background-image: url(@sprite-image);
  }
  .sprite(@sprite) {
    .sprite-image(@sprite);
    .sprite-position(@sprite);
    .sprite-width(@sprite);
    .sprite-height(@sprite);
  }