Search code examples
cssrubysasscompass-sass

How can I programmatically position multiple backgrounds using Sass/Compass?


I'm trying to figure out how to position multiple backgrounds programmatically in Sass, using a single image (sprite) and multiple positions.

The amount of backgrounds depend on the number assigned to $columns. I am running the number of columns through a function to determine the left offset. The top position references the location of the next sprite image.

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

I've tried a simple loop, which of course doesn't work because it just repeats the background property, and doesn't produce the desired effect..

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

I'm thinking I might have to create a function that returns a list of values that can be passed back, but am at a loss on how to do that. Any help would be appreciated.

EDIT:

Thanks to hopper's answer, I was able to achieve the desired result by a slight modification (due to an error on my part in the original posting).

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

Solution

  • You can use the SASS join function to join two lists together, and then use that master list as the background value. For example:

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

    For more information, check out the lists section of the SASS reference.