Sets progress bar visual based on which nth-child the active class is w/ a @for loop

progress-bar.scss

$number-of-steps: 6;
.stage {
    // etc.
    
    &.active {
      // Accents current stage's title.
      .stage-title {
        -webkit-box-shadow:-2px 2px 5px -1px darken($brand-blue,11%) inset;
           -moz-box-shadow:-2px 2px 5px -1px darken($brand-blue,11%) inset;
                box-shadow:-2px 2px 5px -1px darken($brand-blue,11%) inset;
      }
      // All subsequent stages are gray.
      ~ .stage .stage-title {
        background: $lpq-gray-med;
      }
      // By default (0% progress), the bar is gray.
      ~ :last-child:after {
        background: $lpq-gray-med;
      }

      // Depending on which nth-child .stage.active is, decide how much % the progress bar is complete using i-1/n-1 to find midpoint.
      @for $i from 2 through ($number-of-steps - 1) {
        $prog: ($i - 1)/($number-of-steps - 1) * 100;
        $p:  $prog + '%';
        $p2: $prog + 0.001 + '%'; // using an imperceptibly small increment to render a line instead of a gradient.

        &:nth-child(#{$i}n) ~ :last-child:after {
          background: -webkit-linear-gradient(left, $brand-blue 0%,$brand-blue #{$p},$lpq-gray-med #{$p2},$lpq-gray-med 100%); // Chrome10+,Safari5.1+
          background: -moz-linear-gradient(left, $brand-blue 0%, $brand-blue #{$p}, $lpq-gray-med #{$p2}, $lpq-gray-med 100%); // FF3.6+
          background: -ms-linear-gradient(left, $brand-blue 0%,$brand-blue #{$p},$lpq-gray-med #{$p2},$lpq-gray-med 100%); // IE10+
          background: -o-linear-gradient(left, $brand-blue 0%,$brand-blue #{$p},$lpq-gray-med #{$p2},$lpq-gray-med 100%); // Opera 11.10+
          background: -webkit-gradient(linear, left top, right top, color-stop(0%,$brand-blue), color-stop(#{$p},$brand-blue), color-stop(#{$p2},$lpq-gray-med), color-stop(100%,$lpq-gray-med)); // Chrome,Safari4+
          background: linear-gradient(to right, $brand-blue 0%,$brand-blue $p,$lpq-gray-med $p2,$lpq-gray-med 100%); // W3C
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$brand-blue', endColorstr='$lpq-gray-med',GradientType=1 ); // IE6-9
        }
      }

      // If active item is the last child, progress bar is 100% blue.
      &:last-child:after {
        background: $brand-blue;
      }
    }
  }