Question

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

.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错误。

我怎样才能做到这一点？

Answer 1

实现这一目标有两种选择。下面的第一个选项是更简单和更好的选项，因为它使用内置的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作为x中的偏移量和y中的偏移量。
...表示mixin可以包含可变数量的参数。在这种情况下，从第三个开始传递给mixin的所有参数都将分配给@sprite变量。
extract(@sprite,3) - 这将从@sprite参数（100px）中提取第三个值。提取后，我们将mixin调用中的偏移值添加到它。
注意：如果我们将它们作为单独的参数传递给mixin（...，则不需要extract和@offset-x; @offset-y; @sprite; @x; @y。

Demo

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

说明：

split函数的输出是一个字符串，因此在我们对其进行算术运算之前必须将其转换为数字。这可以使用parseInt(string, radix)函数完成。
unit(number,px)将单位（px）附加到计算出的数值。

Demo

其他信息：您还可以查看seven-phases-max在此thread中发布的答案，了解为精灵图标生成样式的不同方法。它使用循环和更多的算术运算来生成样式，在为多个这样的精灵图标编写样式时非常有用。

减：为字符串添加一个数字

1 个答案: