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