2

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

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

所需的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;
  }
}

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

编辑：

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

  $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;
4

1 回答 1

1

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

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

有关更多信息，请查看SASS 参考的列表部分。

于 2012-07-30T21:52:57.727 回答