Question

我正在试图弄清楚如何使用单个图像（精灵）和多个位置以编程方式在Sass中定位多个背景。

背景数量取决于分配给$列的数量。我通过函数运行列数来确定左偏移量。顶部位置引用下一个精灵图像的位置。

期望的CSS：

.col-numbers {
background:
  url('numbers.png') 0 0 no-repeat,
  url('numbers.png') 94px -18px no-repeat,
  url('numbers.png') 188px -36px no-repeat,
  url('numbers.png') 282px -54px no-repeat,
  url('numbers.png') 376px -72px no-repeat;
}

我尝试过一个简单的循环，这当然不起作用，因为它只是重复了背景属性，并没有产生预期的效果。

$columns: 12;

.col-numbers {
  @for $n from 1 through $columns {
    $left: (columns($n - 1, $columns) + gutters($columns));
    $top: (-$n + 1) * 18px;
    $background-pos: '#{$left} #{$top}';
    background: image-url('numbers.png') #{$background-pos} no-repeat;
  }
}

我想我可能需要创建一个函数来返回可以传回的值列表，但是如何做到这一点却不知所措。任何帮助，将不胜感激。

编辑：

感谢漏斗的回答，我通过略微的修改（由于我在原始帖子中的错误）能够达到预期的结果。

  $output: ();

    @for $n from 1 through $columns {
      $left: (columns($n - 1, $columns) + gutters($columns));
      $top: (-$n + 1) * 18px;
      $output: join(
        $output,
        (image-url('numbers.png') #{$left} #{$top} no-repeat),
        comma
      );
    }

    background: $output;

Answer 1

您可以使用SASS join function将两个列表连接在一起，然后使用该主列表作为背景值。例如：

$columns: 12;

.col-numbers {
  $output: ();

  @for $n from 1 through $columns {
    $left: (columns($n - 1, $columns) + gutters($columns));
    $top: (-$n + 1) * 18px;
    $output: join(
      $output,
      (image-url('numbers.png'), $left $top no-repeat),
      comma
    );
  }

  background: $output;
}

有关详细信息，请查看lists的SASS reference部分。

如何使用Sass / Compass以编程方式定位多个背景？

1 个答案: