Custom mixin to show grid backgrounds in Twitter Bootstrap

Grid Backgrounds in Twitter Bootstrap

// Show a Grid Background
// **************************************************
// **************************************************

@function build-grid(   $total-columns: 19,
                        $page-width:    930px,
                        $column-width-percent: 30px,
                        $gutter-width-percent: 20px,
                        $column-color: rgba(255,0,255,.05)) {
    
  //Always transparent white for gutters
  $transparent-color: rgba(255,255,255,0);
  $column-color: rgba(255,0,255,.05);
  
  //Linear Gradient        
        //Column
  $lg:  $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;
  
  @for $i from 2 through $total-columns  {
    $j: $i;
    
    //Gutter
    $gutter-start: $transparent-color ($column-width-percent * $j) + ($gutter-width-percent * ($j - 1));
    $gutter-end: $transparent-color (($column-width-percent * $j) + ($gutter-width-percent * $j));
    
    $lg: join($lg, ($gutter-start, $gutter-end));
  
    //Column
    $column-start: $column-color ($column-width-percent * $j) + ($gutter-width-percent * $j);
    $column-end:  $column-color ($column-width-percent * ($j + 1)) + ($gutter-width-percent * $j);    
    $lg: join($lg, ($column-start, $column-end));
  }
  @return $lg;
}

@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));
  
  $linear-gradient: build-grid($total-columns, $page-width, $column-width-percent, $gutter-width-percent, $column-color);
  
  background: -webkit-linear-gradient(left, $linear-gradient);
  
} //grid-background