Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul>
  <li>Tab1</li>
  <li>Tab2</li>
  <li>Tab3</li>
  <li>Tab4</li>
</ul>

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

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;
}
@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! "
  }
}

ul {
  @include equal-parts;
  list-style: none outside none;
  margin: 0 0 20px;
  padding: 0;
}

.box {
  @include equal-parts(flex,span);
}

SassMeister-output.css

.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.box span {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
}

ul {
  display: table;
  table-layout: fixed;
  width: 100%;
}

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

ul {
  list-style: none outside none;
  margin: 0 0 20px;
  padding: 0;
}

SassMeister-rendered.html

<ul>
  <li>Tab1</li>
  <li>Tab2</li>
  <li>Tab3</li>
  <li>Tab4</li>
</ul>

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