Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wizard">
  <div class="wizard__steps">
    <div class="wizard__step is-complete"><a class="wizard__anchor" href="#step-one"><span class="wizard__number">1</span> Account Info</a></div>
    <div class="wizard__step is-active"><a class="wizard__anchor" href="#step-two"><span class="wizard__number">2</span> Contact Info</a></div>
    <div class="wizard__step"><a class="wizard__anchor" href="#step-3"><span class="wizard__number">3</span> Contact Info</a></div>
  </div>
  <div class="wizard__content">
    <div class="wizard__content__step is-active">
      Pagina 1
    </div>
    <div class="wizard__content__step">
      teste 2
    </div>
    <div class="wizard__content__step">
      Marotagem 3
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@mixin transition($prop: all, $time: 200ms, $time-function: linear, $delay:0) {
    @at-root %trans {
        -moz-transition: $prop $time $time-function;
        -ms-transition: $prop $time $time-function;
        transition: $prop $time $time-function;
    }
    @extend %trans;
    
}
* {
  box-sizing:border-box;
  }
.wizard {
  @mixin newStyle($name, $color, $bg){
    &.#{$name} {
      background: $bg;
      color: $color;
      @content;
      &::before {
        border-top-color: $bg;
        border-bottom-color: $bg;
      }
      &::after {
        border-left-color: $bg;
      }
    }
  }
  @at-root %steps {
    margin:20px 10px 0px 10px;
    padding:0px;
    position: relative;
    clear:both;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
  }
  &__anchor {
    position:relative;
    display:block;
    width:auto;
    height:24px;
    margin-right: 18px;
    padding:0px 10px 0px 3px;
    float: left;
    font-size:11px;
    line-height:24px;
    color: inherit;

    text-decoration:none;
    text-shadow:1px 1px 1px rgba(255,255,255, 0.8);
  }
  &__steps {
    @extend %steps;
  }
  &__step {
    display: inline-block;
    position: relative;
    background: #F0EEE3;
    color: #666;
    margin-right: 15px;
    @include transition;
    &::before {
      @include transition;
      width:0;
      height:0;
      border-top: 12px solid #F0EEE3;
      border-bottom: 12px solid #F0EEE3;
      border-left:12px solid transparent;
      position: absolute;
      content: "";
      top: 0px;
      left: -12px;
    }
    &::after {
        @include transition;
        width: 0;
        height: 0;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left:12px solid #F0EEE3;
        position: absolute;
        content: "";
        top: 0px;
        right: -12px;
    }
   
    @at-root %hover {
      &:hover {
        background: red;
      color: #000;
    
      &::before {
        border-top-color: red;
        border-bottom-color: red;
      }
      &::after {
        border-left-color: red;
      }
        
      }
    }
    
    @include newStyle(is-complete,#163038,#A3C1C9){
      @extend %hover;
    };
    @include newStyle(is-active,#FFF,#163038){
      @extend %hover;
    };
  }
  &__number {
    background: #FFF;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #000;
    color: #666;
  }
  &__content {
    position: relative;
    &__step {
      position: absolute;
      opacity: 0;
      
      &.is-active {
        opacity: 1;
      }
    }
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.wizard__steps {
  margin: 20px 10px 0px 10px;
  padding: 0px;
  position: relative;
  clear: both;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.wizard__anchor {
  position: relative;
  display: block;
  width: auto;
  height: 24px;
  margin-right: 18px;
  padding: 0px 10px 0px 3px;
  float: left;
  font-size: 11px;
  line-height: 24px;
  color: inherit;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.wizard__step {
  display: inline-block;
  position: relative;
  background: #F0EEE3;
  color: #666;
  margin-right: 15px;
}
.wizard__step, .wizard__step::before, .wizard__step::after {
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}
.wizard__step::before {
  width: 0;
  height: 0;
  border-top: 12px solid #F0EEE3;
  border-bottom: 12px solid #F0EEE3;
  border-left: 12px solid transparent;
  position: absolute;
  content: "";
  top: 0px;
  left: -12px;
}
.wizard__step, .wizard__step::before, .wizard__step::after {
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}
.wizard__step::after {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #F0EEE3;
  position: absolute;
  content: "";
  top: 0px;
  right: -12px;
}
.wizard__step, .wizard__step::before, .wizard__step::after {
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}
.wizard__step.is-complete:hover, .wizard__step.is-active:hover {
  background: red;
  color: #000;
}
.wizard__step.is-complete:hover::before, .wizard__step.is-active:hover::before {
  border-top-color: red;
  border-bottom-color: red;
}
.wizard__step.is-complete:hover::after, .wizard__step.is-active:hover::after {
  border-left-color: red;
}
.wizard__step.is-complete {
  background: #a3c1c9;
  color: #163038;
}
.wizard__step.is-complete::before {
  border-top-color: #a3c1c9;
  border-bottom-color: #a3c1c9;
}
.wizard__step.is-complete::after {
  border-left-color: #a3c1c9;
}
.wizard__step.is-active {
  background: #163038;
  color: white;
}
.wizard__step.is-active::before {
  border-top-color: #163038;
  border-bottom-color: #163038;
}
.wizard__step.is-active::after {
  border-left-color: #163038;
}
.wizard__number {
  background: #FFF;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #000;
  color: #666;
}
.wizard__content {
  position: relative;
}
.wizard__content__step {
  position: absolute;
  opacity: 0;
}
.wizard__content__step.is-active {
  opacity: 1;
}

SassMeister-rendered.html

<div class="wizard">
  <div class="wizard__steps">
    <div class="wizard__step is-complete"><a class="wizard__anchor" href="#step-one"><span class="wizard__number">1</span> Account Info</a></div>
    <div class="wizard__step is-active"><a class="wizard__anchor" href="#step-two"><span class="wizard__number">2</span> Contact Info</a></div>
    <div class="wizard__step"><a class="wizard__anchor" href="#step-3"><span class="wizard__number">3</span> Contact Info</a></div>
  </div>
  <div class="wizard__content">
    <div class="wizard__content__step is-active">
      Pagina 1
    </div>
    <div class="wizard__content__step">
      teste 2
    </div>
    <div class="wizard__content__step">
      Marotagem 3
    </div>
  </div>
</div>