49 lines
2.1 KiB
SCSS
49 lines
2.1 KiB
SCSS
|
//************************************************************************//
|
||
|
|
// Background-image property for adding multiple background images with
|
||
|
|
// gradients, or for stringing multiple gradients together.
|
||
|
|
//************************************************************************//
|
||
|
|
|
||
|
|
@mixin background-image($images...) {
|
||
|
|
background-image: _add-prefix($images, webkit);
|
||
|
|
background-image: _add-prefix($images);
|
||
|
|
}
|
||
|
|
|
||
|
|
@function _add-prefix($images, $vendor: false) {
|
||
|
|
$images-prefixed: ();
|
||
|
|
$gradient-positions: false;
|
||
|
|
@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); // linear or radial
|
||
|
|
$gradient-pos: null;
|
||
|
|
$gradient-args: null;
|
||
|
|
|
||
|
|
@if ($gradient-type == linear) or ($gradient-type == radial) {
|
||
|
|
$gradient-pos: nth(nth($images, $i), 2); // Get gradient position
|
||
|
|
$gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
$gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
|
||
|
|
}
|
||
|
|
|
||
|
|
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
|
||
|
|
$gradient: _render-gradients($gradient-positions, $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));
|