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

単純なループを試しましたが、これはもちろん、backgroundプロパティを繰り返すだけで、目的の効果が得られないため、機能しません。

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

1 に答える 1

1

SASS結合関数を使用して 2 つのリストを結合し、そのマスター リストをバックグラウンド値として使用できます。例えば：

$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 に答える