Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="wsk-tabs">
  <li class="wsk-tabs__item">
    <a href="#" class="wsk-tabs__link">Foo</a>
  </li>
  <li class="wsk-tabs__item">
    <a href="#" class="wsk-tabs__link">Bar</a>
  </li>
  <li class="wsk-tabs__item">
    <a href="#" class="wsk-tabs__link  is-active">Baz</a>
  </li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

//$wsk-tabs-namespace:                "";
//$wsk-tabs-font-size:                inherit;

// _components.tabs.scss
$wsk-tabs-namespace:                "wsk-" !default;

$wsk-tabs-font-size:                14px !default;
$wsk-tabs-font-family:              sans-serif !default;

$wsk-tabs-color:                    #fff !default;
$wsk-tabs-color-background:         #33b679 !default;
$wsk-tabs-color-background-active:  darken($wsk-tabs-color-background, 5%) !default;

$wsk-tabs-padding:                  10px !default;
$wsk-tabs-padding-small:            round(0.5 * $wsk-tabs-padding) !default;
$wsk-tabs-padding-large:            round(2.0 * $wsk-tabs-padding) !default;

.#{$wsk-tabs-namespace}tabs {
  all: initial;
  display: table;
  table-layout: fixed;
  width: 100%;
  font-size: $wsk-tabs-font-size;
  font-family: $wsk-tabs-font-family;
  background-color: $wsk-tabs-color-background;
  color: $wsk-tabs-color;
}

  .#{$wsk-tabs-namespace}tabs__item {
    display: table-cell;
  }

    .#{$wsk-tabs-namespace}tabs__link {
      display: block;
      padding: $wsk-tabs-padding;
      text-align: center;
      text-decoration: none;
      color: $wsk-tabs-color;

      &.is-active {
        background-color: $wsk-tabs-color-background-active;
      }

      .#{$wsk-tabs-namespace}tabs--small & {
        padding: $wsk-tabs-padding-small;
      }

      .#{$wsk-tabs-namespace}tabs--large & {
        padding: $wsk-tabs-padding-large;
      }

    }

SassMeister-output.css

.wsk-tabs {
  all: initial;
  display: table;
  table-layout: fixed;
  width: 100%;
  font-size: 14px;
  font-family: sans-serif;
  background-color: #33b679;
  color: #fff;
}

.wsk-tabs__item {
  display: table-cell;
}

.wsk-tabs__link {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
}
.wsk-tabs__link.is-active {
  background-color: #2da26c;
}
.wsk-tabs--small .wsk-tabs__link {
  padding: 5px;
}
.wsk-tabs--large .wsk-tabs__link {
  padding: 20px;
}

SassMeister-rendered.html

<ul class="wsk-tabs">
  <li class="wsk-tabs__item">
    <a href="#" class="wsk-tabs__link">Foo</a>
  </li>
  <li class="wsk-tabs__item">
    <a href="#" class="wsk-tabs__link">Bar</a>
  </li>
  <li class="wsk-tabs__item">
    <a href="#" class="wsk-tabs__link  is-active">Baz</a>
  </li>
</ul>