减：在字符串上加一个数字

Yan Takushevich 发表于 Dev

严塔库舍维奇

我需要提取字符串的一部分并为其添加数字。这是我的代码：

.sprite-position-offset(@sprite; @offset-x; @offset-y) {
  @sprite-offset-x: ~`"@{sprite}".split(', ')[2]` + @offset-x;
  @sprite-offset-y: ~`"@{sprite}".split(', ')[3]` + @offset-y;
  background-position: @sprite-offset-x  @sprite-offset-y;
}

的结果

~`"@{sprite}".split(', ')[2]`

是100px，例如。

在上面的示例中，我得到了Unrecognised input in file错误。

我该如何实现？

哈里

有两种方法可以实现此目的。下面的第一个选项是更简单，更好的选项，因为它使用了内置extract功能。

选项1：

.sprite-position-offset(@offset-x; @offset-y; @sprite...) { /* the mixin */
    @sprite-offset-x: extract(@sprite,3) + @offset-x; /* calculate x offset */
    @sprite-offset-y: extract(@sprite,4) + @offset-y; /* calculate y offset */
    @sprite-url: extract(@sprite,1); /* extract the url of the image */
    background: url(@sprite-url);
    background-position: @sprite-offset-x @sprite-offset-y;
}

a{ /* any selector within which you want to call the mixin */
    .sprite-position-offset(1px,1px,"/path/to/image.jpg",b,100px,100px);
}

解释：

我们正在使用前两个参数的mixin作为in中的offsetx和in中的offset y。
...指示mixin可以具有可变数量的参数。在这种情况下，将从第三个参数开始传递给mixin的所有参数都将分配给该@sprite变量。
extract(@sprite,3)-这将从@sprite参数中提取第三个值（100px）。提取后，我们将mixin调用中的偏移值添加到它。
注：该...和extract如果我们将它们作为单独的参数的混入并不真正需要（如@offset-x; @offset-y; @sprite; @x; @y。

演示版

选项2 ：（复杂，不建议使用）

.sprite-position-offset(@sprite; @offset-x; @offset-y) {
  @temp: ~"@{sprite}";
  @sprite-offset-x: ~`parseInt("@{temp}".split(', ')[2],10) + @{offset-x}`;
  @sprite-offset-y: ~`parseInt("@{temp}".split(', ')[3],10) + @{offset-y}`;
  background-position: unit(@sprite-offset-x,px)  unit(@sprite-offset-y,px);
}

a{
  .sprite-position-offset("/path/to/image.jpg, b, 100, 100",1,1);
}

解释：