@import "compass/css3/images"; @mixin background-grid($columns: false, $gutter: false, $color: rgba(#69aedb, .5)) { $background-length: length($grids); @if not ($columns) { @for $i from 1 through $background-length { @if $i == 1 { @include background-build($columns, $gutter, $color); } @else { $mq: nth(nth($grids, $i), 2); $grid: nth(nth($grids, $i), 1); @include breakpoint($mq) { @include background-build($grid, $gutter, $color); } } } } } @mixin background-build($columns, $gutter, $color) { $columns: find-grid($columns); $gutter: find-gutter($gutter); $stops: background-gradient-stops($columns, $gutter, $color); @include background( linear-gradient( left, $stops ) ); } ////////////////////////////// // Get the stops of the gradient ////////////////////////////// @function background-gradient-stops($columns, $gutter, $color) { $bkg: (); $count: column-count($columns); @for $i from 1 through column-count($columns) { $bkg: join($bkg, background-column-gradient($i, $columns, $gutter, $color), comma); } @return $bkg; } ////////////////////////////// // Get the columns ////////////////////////////// @function background-column-gradient($location, $columns, $gutter, $color) { @if $location == 1 { @return $color 0%, $color column-span(1, 1, $columns), transparentize($color, 1) column-span(1, 1, $columns); } @if $location == column-count($columns) { @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color 100%; } @if $location > 1 { @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location, 1, $columns), transparentize($color, 1) column-span($location, 1, $columns); } }