Progression mixin

_lane-titles.scss

.lane-titles {
  @include position(absolute, 0 0 0 0px);
  @include progress(33px, saturate(darken($light-gray, 13%), 8%),
    saturate($dark-gray, 18%), 6, h2);

  h2 {
    @include span-columns(3);
  }
}

_progress.scss

@mixin progress($height, $light-bg-color,
  $dark-bg-color, $totalNum, $arrow-element: h2) {

  background: $light-bg-color;
  @include background(linear-gradient(90deg, $light-bg-color,
    $light-bg-color,
    $dark-bg-color));
  width: 100%;
  z-index: 2;

  hgroup {
    @include outer-container;
    height: 33px;
    margin-bottom: 0px;
    position: relative;
  }

  #{$arrow-element} {
    height: $height;
    padding-left: 0.8em;
    padding-top: 0.2em;
    position: relative;

    &:after, &:before {
      border: solid transparent;
      content: " ";
      left: 100%;
      position: absolute;
      pointer-events: none;
      top: 0;
      width: 0;
    }

    &:before {
      border: 0px;
      height: $height;
      width: 5%;
    }

    &:after {
      border-width: ($height / 2) - 0.5;
      z-index: 3;
    }
  }

  @for $header from 1 through $totalNum {
    #{$arrow-element}:nth-child(#{$header}){
      $int: $header * 9%;
      $desaturate: $header * 4%;
      $beforeInt: ($header + 1) * 9;
      background: desaturate(darken($light-bg-color, $int), $desaturate);

      &:after {
        border-left-color: desaturate(darken($light-bg-color, $int), $desaturate);
      }

      &:before {
        background-color: desaturate(darken($light-bg-color, $beforeInt), $desaturate);
      }

      &:first-child, &:first-child:after {
        border-left-color: $light-bg-color;
        background: transparent;
      }

      &:last-child:before {
        background-color: transparent;
      }
    }
  }
}

progress-lanes.html.erb

<div class="lane-titles">
  <hgroup>
    <h2 class="new">New</h2>
    <h2 class="in-process">In Process</h2>
    <h2 class="tentative">Tentative</h2>
    <h2 class="definite">Definite</h2>
  </hgroup>
</div>