Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul>
  <li class="active">tab1</li>
  <li>tab1</li>
  <li>tab1</li>
</ul>

<div class="box">
  <div>Tab</div>
  <div class="current">Tab</div>
  <div>Tab</div>
  <div>Tab</div>
</div>

<nav>
  <span>Tab</span>
  <span>Tab</span>
  <span class="cur">Tab</span>
  <span>Tab</span>
  <span>Tab</span>
  <span>Tab</span>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

%flexbox{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

%equalflex {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
}
%table-layout{
  display: table;
  table-layout: fixed;
  width: 100%;
}

%table-cell{
  display: table-cell;
  width: 1%;
  text-align: center;
}

%nav-tab-active {
  content:"";
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
}

@mixin equal-parts($way:table,$children: li){
  @if $way == table {
    @extend %table-layout;
    
    $childrenEle: li div p a span strong;
    
    @if index($childrenEle, $children) {
      #{$children} {
        @extend %table-cell;
      }
    }
    @else {
      .#{$children} {
        @extend %table-cell;
      }
    }
  }
  @else if $way == flex {
    @extend %flexbox;
    
    $childrenEle: li div p a span strong;
    
    @if index($childrenEle, $children) {
      #{$children} {
        @extend %equalflex;
      }
    }
    @else {
      .#{$children} {
        @extend %equalflex;
      }
    }
  }
  @else {
    @warn "You have to put #{$way} value is set to the table or flex! "
  }
}

@mixin nav-tab(
  $tab-bg-color: #fff,
  $tab-color: #051b28,
  $tab-border-color: #d9d9d9,
  $tab-active-class: unquote("active"),
  $tab-active-color:#ff5001,
  $tab-childer: li,
  $tab-height-base: 32px,
  $tab-line-height-base: 32px,
  $tab-padding-horizontal: 20px,
  $tab-font-size: 14px){
    height: $tab-height-base;
    line-height:$tab-line-height-base;
    background: $tab-bg-color;
    border-bottom: 1px solid $tab-border-color;
    box-shadow: 0 1px 0 0 rgba($tab-border-color, .05);
    @extend %flexbox;
    
    $childrenEle: li div p a span strong;
    
    @if index($childrenEle, $tab-childer) {
        #{$tab-childer} {
            @extend %equalflex;
            padding: 0 $tab-padding-horizontal;
            font-size: $tab-font-size;
            position: relative;
            color: $tab-color;
            cursor: pointer;
            
            &.#{$tab-active-class} {
              color: $tab-active-color;
              
              &:after {
                @extend %nav-tab-active;
                background: $tab-active-color;
              }
            }
        }
    }
    @else {
        .#{$tab-childer} {
            @extend %equalflex;
            padding: 0 $tab-padding-horizontal;
            font-size: $tab-font-size;
            position: relative;
            color: $tab-color;
            cursor: pointer;
            
            &.#{$tab-active-class} {
              color: $tab-active-color;
              
              &:after {
                @extend %nav-tab-active;
                background: $tab-active-color;
              }
            }
        }
    }
  }
  
ul {
  @include nav-tab;
  margin: 0 0 10px;
  padding: 0;
  list-style: none outside none;
}
.box {
  @include nav-tab(#ffea02,#5a621b,#ffea02,"current",#051b28,div);
  margin-bottom: 10px;
}
nav {
  @include nav-tab(#8b64e9,#d7caf7,#8b64e9,"cur",#fff,span,44px,44px,25px,20px);
}

SassMeister-output.css

ul, .box, nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

ul li, .box div, nav span {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
}

ul li.active:after, .box div.current:after, nav span.cur:after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
}

ul {
  height: 32px;
  line-height: 32px;
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
  box-shadow: 0 1px 0 0 rgba(217, 217, 217, 0.05);
  margin: 0 0 10px;
  padding: 0;
  list-style: none outside none;
}
ul li {
  padding: 0 20px;
  font-size: 14px;
  position: relative;
  color: #051b28;
  cursor: pointer;
}
ul li.active {
  color: #ff5001;
}
ul li.active:after {
  background: #ff5001;
}

.box {
  height: 32px;
  line-height: 32px;
  background: #ffea02;
  border-bottom: 1px solid #ffea02;
  box-shadow: 0 1px 0 0 rgba(255, 234, 2, 0.05);
  margin-bottom: 10px;
}
.box div {
  padding: 0 20px;
  font-size: 14px;
  position: relative;
  color: #5a621b;
  cursor: pointer;
}
.box div.current {
  color: #051b28;
}
.box div.current:after {
  background: #051b28;
}

nav {
  height: 44px;
  line-height: 44px;
  background: #8b64e9;
  border-bottom: 1px solid #8b64e9;
  box-shadow: 0 1px 0 0 rgba(139, 100, 233, 0.05);
}
nav span {
  padding: 0 25px;
  font-size: 20px;
  position: relative;
  color: #d7caf7;
  cursor: pointer;
}
nav span.cur {
  color: #fff;
}
nav span.cur:after {
  background: #fff;
}

SassMeister-rendered.html

<ul>
  <li class="active">tab1</li>
  <li>tab1</li>
  <li>tab1</li>
</ul>

<div class="box">
  <div>Tab</div>
  <div class="current">Tab</div>
  <div>Tab</div>
  <div>Tab</div>
</div>

<nav>
  <span>Tab</span>
  <span>Tab</span>
  <span class="cur">Tab</span>
  <span>Tab</span>
  <span>Tab</span>
  <span>Tab</span>
</nav>