gistfile1.css

@mixin grid-background( $total-columns: $gridColumns,
                        $grid-column-width: $gridColumnWidth,
                        $grid-gutter-width: $gridGutterWidth,
                        //$offset: $grid-background-offset,
                        $column-color: rgba(255,0,255,.05))
  
  {
    
  //Always transparent white for gutters
  $transparent-color: rgba(255,255,255,0);
  
  //Calculates the page width
  $page-width: ($grid-column-width * $total-columns) + ($grid-gutter-width * ($total-columns - 1));
    
  //Calculating column and gutter widths as a percent to use them in linear-gradients
  $column-width-percent: percentage(($grid-column-width / $page-width));
  $gutter-width-percent: percentage(($grid-gutter-width / $page-width));
    
    
  background: -webkit-linear-gradient(left,
    
                //Column
                $column-color 0,
                $column-color $column-width-percent,
                
                //Gutter
                $transparent-color $column-width-percent,
                $transparent-color $column-width-percent + $gutter-width-percent,
                
                //Column
                $column-color $column-width-percent + $gutter-width-percent,
                $column-color ($column-width-percent * 2) + $gutter-width-percent,
                
                //Gutter
                $transparent-color ($column-width-percent * 2) + $gutter-width-percent,
                $transparent-color (($column-width-percent * 2) + ($gutter-width-percent * 2)),
                
                //Column
                $column-color (($column-width-percent * 2) + ($gutter-width-percent * 2)),
                $column-color (($column-width-percent * 3) + ($gutter-width-percent * 2)),
                
                //Gutter
                $transparent-color (($column-width-percent * 3) + ($gutter-width-percent * 2)),
                $transparent-color (($column-width-percent * 3) + ($gutter-width-percent * 3)),
                
                //Column
                $column-color (($column-width-percent * 3) + ($gutter-width-percent * 3)),
                $column-color (($column-width-percent * 4) + ($gutter-width-percent * 3)),
                
                //Gutter
                $transparent-color (($column-width-percent * 4) + ($gutter-width-percent * 3)),
                $transparent-color (($column-width-percent * 4) + ($gutter-width-percent * 4)),
                
                //Column
                $column-color (($column-width-percent * 4) + ($gutter-width-percent * 4)),
                $column-color (($column-width-percent * 5) + ($gutter-width-percent * 4)),
                
                //Gutter
                $transparent-color (($column-width-percent * 5) + ($gutter-width-percent * 4)),
                $transparent-color (($column-width-percent * 5) + ($gutter-width-percent * 5)),
                
                //Column
                $column-color (($column-width-percent * 5) + ($gutter-width-percent * 5)),
                $column-color (($column-width-percent * 6) + ($gutter-width-percent * 5)),
                
                //Gutter
                $transparent-color (($column-width-percent * 6) + ($gutter-width-percent * 5)),
                $transparent-color (($column-width-percent * 6) + ($gutter-width-percent * 6)),
                
                //Column
                $column-color (($column-width-percent * 6) + ($gutter-width-percent * 6)),
                $column-color (($column-width-percent * 7) + ($gutter-width-percent * 6)),
                
                //Gutter
                $transparent-color (($column-width-percent * 7) + ($gutter-width-percent * 6)),
                $transparent-color (($column-width-percent * 7) + ($gutter-width-percent * 7)),
                
                //Column
                $column-color (($column-width-percent * 7) + ($gutter-width-percent * 7)),
                $column-color (($column-width-percent * 8) + ($gutter-width-percent * 7)),
                
                //Gutter
                $transparent-color (($column-width-percent * 8) + ($gutter-width-percent * 7)),
                $transparent-color (($column-width-percent * 8) + ($gutter-width-percent * 8)),
                
                //Column
                $column-color (($column-width-percent * 8) + ($gutter-width-percent * 8)),
                $column-color (($column-width-percent * 9) + ($gutter-width-percent * 8)),
                
                //Gutter
                $transparent-color (($column-width-percent * 9) + ($gutter-width-percent * 8)),
                $transparent-color (($column-width-percent * 9) + ($gutter-width-percent * 9)),
                
                //Column
                $column-color (($column-width-percent * 9) + ($gutter-width-percent * 9)),
                $column-color (($column-width-percent * 10) + ($gutter-width-percent * 9)),
                
                //Gutter
                $transparent-color (($column-width-percent * 10) + ($gutter-width-percent * 9)),
                $transparent-color (($column-width-percent * 10) + ($gutter-width-percent * 10)),
                
                //Column
                $column-color (($column-width-percent * 10) + ($gutter-width-percent * 10)),
                $column-color (($column-width-percent * 11) + ($gutter-width-percent * 10)),
                
                //Gutter
                $transparent-color (($column-width-percent * 11) + ($gutter-width-percent * 10)),
                $transparent-color (($column-width-percent * 11) + ($gutter-width-percent * 11)),
                
                //Column
                $column-color (($column-width-percent * 11) + ($gutter-width-percent * 11)),
                $column-color (($column-width-percent * 12) + ($gutter-width-percent * 11)),
                
                //Gutter
                $transparent-color (($column-width-percent * 12) + ($gutter-width-percent * 11)),
                $transparent-color (($column-width-percent * 12) + ($gutter-width-percent * 12)),
                
                //Column
                $column-color (($column-width-percent * 12) + ($gutter-width-percent * 12)),
                $column-color (($column-width-percent * 13) + ($gutter-width-percent * 12)),
                
                //Gutter
                $transparent-color (($column-width-percent * 13) + ($gutter-width-percent * 12)),
                $transparent-color (($column-width-percent * 13) + ($gutter-width-percent * 13)),
                
                
                //Column
                $column-color (($column-width-percent * 13) + ($gutter-width-percent * 13)),
                $column-color (($column-width-percent * 14) + ($gutter-width-percent * 13)),
                
                //Gutter
                $transparent-color (($column-width-percent * 14) + ($gutter-width-percent * 13)),
                $transparent-color (($column-width-percent * 14) + ($gutter-width-percent * 14)),
                
                //Column
                $column-color (($column-width-percent * 14) + ($gutter-width-percent * 14)),
                $column-color (($column-width-percent * 15) + ($gutter-width-percent * 14)),
                
                //Gutter
                $transparent-color (($column-width-percent * 15) + ($gutter-width-percent * 14)),
                $transparent-color (($column-width-percent * 15) + ($gutter-width-percent * 15)),
                
                //Column
                $column-color (($column-width-percent * 15) + ($gutter-width-percent * 15)),
                $column-color (($column-width-percent * 16) + ($gutter-width-percent * 15)),
                
                //Gutter
                $transparent-color (($column-width-percent * 16) + ($gutter-width-percent * 15)),
                $transparent-color (($column-width-percent * 16) + ($gutter-width-percent * 16)),
                
                //Column
                $column-color (($column-width-percent * 16) + ($gutter-width-percent * 16)),
                $column-color (($column-width-percent * 17) + ($gutter-width-percent * 16)),
                
                //Gutter
                $transparent-color (($column-width-percent * 17) + ($gutter-width-percent * 16)),
                $transparent-color (($column-width-percent * 17) + ($gutter-width-percent * 17)),
                
                
                //Column
                $column-color (($column-width-percent * 17) + ($gutter-width-percent * 17)),
                $column-color (($column-width-percent * 18) + ($gutter-width-percent * 17)),
                
                //Gutter
                $transparent-color (($column-width-percent * 18) + ($gutter-width-percent * 17)),
                $transparent-color (($column-width-percent * 18) + ($gutter-width-percent * 18)),
                
                //Column
                $column-color (($column-width-percent * 18) + ($gutter-width-percent * 18)),
                $column-color (($column-width-percent * 19) + ($gutter-width-percent * 18)),
                
                //Gutter
                $transparent-color (($column-width-percent * 19) + ($gutter-width-percent * 18)),
                $transparent-color (($column-width-percent * 19) + ($gutter-width-percent * 19))
                
                );
    
    
} //grid-background