Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

121 lines (105 sloc) 3.479 kb
// Background image property for support with adding multiple background images with a gradients.
@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);
$assets: false;
$gradients: false;
$count: 0;
//Find all asset images in list
@for $i from 1 through length($images) {
$type: type-of(nth($images, $i));
@if $type == list {
$count: $count + 1;
}
@else if $type == string {
@if $assets == false {
$assets: nth($images, $i);
}
@else {
$assets: join($assets, nth($images, $i), comma);
}
}
}
// Find all gradients in list
@for $i from 1 through length($images) {
$type: type-of(nth($images, $i));
@if $type == list {
@if $gradients == false {
$gradients: nth($images, $i);
}
@else {
$gradients: $gradients, nth($images, $i);
}
}
}
@function render-gradients($gradients, $vendor: false) {
@if $count == 1 {
$vendor-gradients: false;
@if $vendor {
$vendor-gradients: -#{$vendor}-linear-gradient($gradients);
}
@else if $vendor == false {
$vendor-gradients: "linear-gradient(#{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
}
@else if $count >= 2 {
$vendor-gradients: false;
@for $i from 1 through length($gradients) {
@if $vendor {
@if $vendor-gradients == false {
$vendor-gradients: -#{$vendor}-linear-gradient(nth($gradients, $i));
}
@else {
$vendor-gradients: $vendor-gradients, -#{$vendor}-linear-gradient(nth($gradients, $i));
}
}
@else if $vendor == false {
@if $vendor-gradients {
$vendor-gradients: "linear-gradient(#{nth($gradients, $i)})";
$vendor-gradients: unquote($vendor-gradients);
}
@else {
$vendor-gradients: $vendor-gradients, "linear-gradient( #{nth($gradients, $i)} )";
$vendor-gradients: unquote($vendor-gradients);
}
}
}
@return $vendor-gradients;
}
}
@if $assets {
@if $count >= 1 {
background-image: $assets, render-gradients($gradients, webkit);
background-image: $assets, render-gradients($gradients, moz);
background-image: $assets, render-gradients($gradients, ms);
background-image: $assets, render-gradients($gradients, o);
background-image: $assets, render-gradients($gradients);
}
@else {
background-image: $assets;
}
}
@else {
@if $count >= 1 {
background-image: render-gradients($gradients, webkit);
background-image: render-gradients($gradients, moz);
background-image: render-gradients($gradients, ms);
background-image: render-gradients($gradients, o);
background-image: render-gradients($gradients);
}
}
}
//Examples:
//@include background-image(url("/images/a.png"), linear-gradient(#ffff00, #999));
//@include background-image(url("/images/a.png"), url("/images/b.png"), url("/images/c.png"), linear-gradient(#ffff00 10%, #000 20%));
Jump to Line
Something went wrong with that request. Please try again.