Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="tab">
  <li class="tab__item tab__item--current">Tab</li>
  <li class="tab__item">Tab</li>
  <li class="tab__item">Tab</li>
  <li class="tab__item">Tab</li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

* { box-sizing: border-box };

$bc: #444;
$tabSpace: 2px;

.tab {
  margin: 0; padding: 0;
  list-style-type: none;
  border-bottom: 1px solid $bc;
  &__item {
    display: inline-block;
    cursor: pointer;
    min-width: 100px;
    margin-right: $tabSpace;
    border-top: 1px solid $bc;
    border-left: 1px solid $bc;
    border-right: 1px solid $bc;
    text-align: center;
    &--current {
      position: relative;
        &:after {
          content:"";
          position: absolute;
          display: block;
          bottom: -1px;
          left: 0;
          width: 100%;
          border-bottom: 2px solid #FFF
        }
    }
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.tab {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-bottom: 1px solid #444444;
}
.tab__item {
  display: inline-block;
  cursor: pointer;
  min-width: 100px;
  margin-right: 2px;
  border-top: 1px solid #444444;
  border-left: 1px solid #444444;
  border-right: 1px solid #444444;
  text-align: center;
}
.tab__item--current {
  position: relative;
}
.tab__item--current:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -1px;
  left: 0;
  width: 100%;
  border-bottom: 2px solid white;
}

SassMeister-rendered.html

<ul class="tab">
  <li class="tab__item tab__item--current">Tab</li>
  <li class="tab__item">Tab</li>
  <li class="tab__item">Tab</li>
  <li class="tab__item">Tab</li>
</ul>