58 lines
2.1 KiB
SCSS
58 lines
2.1 KiB
SCSS
//************************************************************************//
|
|
// Background-image property for adding multiple background images with
|
|
// gradients, or for stringing multiple gradients together.
|
|
//************************************************************************//
|
|
|
|
@mixin background-image(
|
|
$image-1 , $image-2: false,
|
|
$image-3: false, $image-4: false,
|
|
$image-5: false, $image-6: false,
|
|
$image-7: false, $image-8: false,
|
|
$image-9: false, $image-10: false
|
|
) {
|
|
$images: compact($image-1, $image-2,
|
|
$image-3, $image-4,
|
|
$image-5, $image-6,
|
|
$image-7, $image-8,
|
|
$image-9, $image-10);
|
|
|
|
background-image: add-prefix($images, webkit);
|
|
background-image: add-prefix($images, moz);
|
|
background-image: add-prefix($images, ms);
|
|
background-image: add-prefix($images, o);
|
|
background-image: add-prefix($images);
|
|
}
|
|
|
|
|
|
@function add-prefix($images, $vendor: false) {
|
|
$images-prefixed: ();
|
|
|
|
@for $i from 1 through length($images) {
|
|
$type: type-of(nth($images, $i)); // Get type of variable - List or String
|
|
|
|
// If variable is a list - Gradient
|
|
@if $type == list {
|
|
$gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
|
|
$gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
|
|
|
|
$gradient: render-gradients($gradient-args, $gradient-type, $vendor);
|
|
$images-prefixed: append($images-prefixed, $gradient, comma);
|
|
}
|
|
|
|
// If variable is a string - Image
|
|
@else if $type == string {
|
|
$images-prefixed: join($images-prefixed, nth($images, $i), comma);
|
|
}
|
|
}
|
|
@return $images-prefixed;
|
|
}
|
|
|
|
|
|
|
|
//Examples:
|
|
//@include background-image(linear-gradient(top, orange, red));
|
|
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
|
|
//@include background-image(url("/images/a.png"), linear-gradient(orange, red));
|
|
//@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
|
|
//@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
|