_background-image.scss (1332B)
1 //************************************************************************// 2 // Background-image property for adding multiple background images with 3 // gradients, or for stringing multiple gradients together. 4 //************************************************************************// 5 6 @mixin background-image($images...) { 7 $webkit-images: (); 8 $spec-images: (); 9 10 @each $image in $images { 11 $webkit-image: (); 12 $spec-image: (); 13 14 @if (type-of($image) == string) { 15 $url-str: str-slice($image, 1, 3); 16 $gradient-type: str-slice($image, 1, 6); 17 18 @if $url-str == "url" { 19 $webkit-image: $image; 20 $spec-image: $image; 21 } 22 23 @else if $gradient-type == "linear" { 24 $gradients: _linear-gradient-parser($image); 25 $webkit-image: map-get($gradients, webkit-image); 26 $spec-image: map-get($gradients, spec-image); 27 } 28 29 @else if $gradient-type == "radial" { 30 $gradients: _radial-gradient-parser($image); 31 $webkit-image: map-get($gradients, webkit-image); 32 $spec-image: map-get($gradients, spec-image); 33 } 34 } 35 36 $webkit-images: append($webkit-images, $webkit-image, comma); 37 $spec-images: append($spec-images, $spec-image, comma); 38 } 39 40 background-image: $webkit-images; 41 background-image: $spec-images; 42 }