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)
// ----

// _settings.colors.scss

$color-brand: red;
$color-highlight: lighten($color-brand, 10%);
$color-shadow: lighten($color-brand, 10%);

$color-blue: blue;
$color-green: green;
$color-grey: #333;

$color-links: $color-brand;
$color-links-hover: $color-highlight;

$color-btn: #fff;
$color-btn-background: $color-brand;






// _base.links.scss
a {
  color: $color-links;

  &:hover {
    color: $color-links-hover;
  }

}

// _components.buttons.scss
.btn {
  color: $color-btn;
  background-color: $color-btn-background;
}

SassMeister-output.css

a {
  color: red;
}
a:hover {
  color: #ff3333;
}

.btn {
  color: #fff;
  background-color: red;
}

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>