Skip to content

Instantly share code, notes, and snippets.

@Tenderfeel
Created October 12, 2012 09:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Tenderfeel/3878189 to your computer and use it in GitHub Desktop.
Save Tenderfeel/3878189 to your computer and use it in GitHub Desktop.
Sass+Compass Multiple 'inline-image' background
@mixin data-background($image...){
$length:length($image);
@if ($length > 1) {
$images:null;
$sizes:null;
@for $i from 1 through $length {
$images:append($images, inline-image(nth($image, $i)), "comma");
$sizes:append($sizes, image-size(nth($image, $i)), "comma");
}
background-image:$images;
@include background-size($sizes);
} @else {
$image:nth($image, 1);
background-image:inline-image($image);
@include background-size(image-size($image));
}
};
//$s = scale
@function image-size($image, $s:2) {
$width : image-width($image);
$height: image-height($image);
@if $s > 1 {
$width:$width/$s;
$height:$height/$s;
}
@return $width $height;
}
//use
//@include data-background('foo.png', 'bar.png');
//@include data-background('hoge.png');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment