43 lines
1.3 KiB
SCSS
43 lines
1.3 KiB
SCSS
|
//************************************************************************//
|
||
|
|
// Background-image property for adding multiple background images with
|
||
|
|
// gradients, or for stringing multiple gradients together.
|
||
|
|
//************************************************************************//
|
||
|
|
|
||
|
|
@mixin background-image($images...) {
|
||
|
|
$webkit-images: ();
|
||
|
|
$spec-images: ();
|
||
|
|
|
||
|
|
@each $image in $images {
|
||
|
|
$webkit-image: ();
|
||
|
|
$spec-image: ();
|
||
|
|
|
||
|
|
@if (type-of($image) == string) {
|
||
|
|
$url-str: str-slice($image, 0, 3);
|
||
|
|
$gradient-type: str-slice($image, 0, 6);
|
||
|
|
|
||
|
|
@if $url-str == "url" {
|
||
|
|
$webkit-image: $image;
|
||
|
|
$spec-image: $image;
|
||
|
|
}
|
||
|
|
|
||
|
|
@else if $gradient-type == "linear" {
|
||
|
|
$gradients: _linear-gradient-parser($image);
|
||
|
|
$webkit-image: map-get($gradients, webkit-image);
|
||
|
|
$spec-image: map-get($gradients, spec-image);
|
||
|
|
}
|
||
|
|
|
||
|
|
@else if $gradient-type == "radial" {
|
||
|
|
$gradients: _radial-gradient-parser($image);
|
||
|
|
$webkit-image: map-get($gradients, webkit-image);
|
||
|
|
$spec-image: map-get($gradients, spec-image);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$webkit-images: append($webkit-images, $webkit-image, comma);
|
||
|
|
$spec-images: append($spec-images, $spec-image, comma);
|
||
|
|
}
|
||
|
|
|
||
|
|
background-image: $webkit-images;
|
||
|
|
background-image: $spec-images;
|
||
|
|
}
|