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）是显而易见的，我相信通过查看精灵，第3和第4个似乎是背景位置偏移（X和Y）。但其他人呢？这个变量中的每个9个元素都指定了什么？

？
？
横向位置
垂直位置
宽度
高度
？
？
background-image url

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);
  }

这个LESS精灵速记规范中有哪些参数？

1 个答案: