Sass CSS Blueprint Grid

SCSS

$bgcolor: #36C;

$unitWidth:     18px;
$numberOfUnits: 5;

$majorWidth: 2px;
$minorWidth: 1px;

$majorColor: rgba(0,0,0,0.15);
$minorColor: rgba(0,0,0,0.05);
$gapColor: transparent;

$radialCenter: rgba(51,102,204,0);
$radialEdge: rgba(39,76,153,0.75);

$gridSize: ($unitWidth * $numberOfUnits); /* 90px */

$unitWidthPercent:  ($unitWidth  / $gridSize) * 100%; /* 20.0% */
$majorWidthPercent: ($majorWidth / $gridSize) * 100%; /*  2.2% */
$minorWidthPercent: ($minorWidth / $gridSize) * 100%; /*  1.1% */

@mixin gradients {
  
  /* Create radial gradient */
  $radialgradient: $radialCenter 0%, $radialEdge 100%;
  
    
  /* Create linear gradient 
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! PROBLEM AREA !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  */  
  @for $i from 1 through $numberOfUnits {
    if $i == 1 {
      $lineargradient: $majorColor 0%, $majorColor $majorWidthPercent, $gapColor $majorWidthPercent, $gapColor $unitWidthPercent
    }
    else if $i > 1 {
      $minor-begin: ($i-1)*$unitWidthPercent;
      $minor-end: (($i-1)*$unitWidthPercent)+$minorWidthPercent;
      $gap-begin: $minor-end;
      $gap-end: $i*$unitWidthPercent;
    
      $lineargradient: #{$lineargradient}, $minorColor $minor-begin, $minorColor $minor-end, $gapColor $gap-begin, $gapColor $gap-end;
    }
  }
  
  /* Correct Linear Gradient Output: 
      rgba(0,0,0,0.15)  0%, rgba(0,0,0,0.15) 2.222222222%, transparent 2.222222222%, transparent 20%,
      rgba(0,0,0,0.05) 20%, rgba(0,0,0,0.05) 21.11111111%, transparent 21.11111111%, transparent 40%,
      rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.05) 41.11111111%, transparent 41.11111111%, transparent 60%,
      rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.05) 61.11111111%, transparent 61.11111111%, transparent 80%,
...