Generated by SassMeister.com.

SassMeister-input-HTML.html

<ol>
  <li><a href="#">Plain link</a></li>
  <li><a class="button" href="#">Button</a></li>
  <li><a class="button button--primary" href="#">Button primary</a></li>
  <li><a class="button button--primary button--open" href="#">Button primary open</a></li>
  <li><a class="button button--secondary" href="#">Button secondary</a></li>
  <li><a class="button button--secondary button--open" href="#">Button secondary open</a></li>
</ol>

SassMeister-input.scss

// ----
// libsass (v2.0.0)
// ----

$primary-color: blue;
$secondary-color: red;

body { background: lightblue; font-family: sans-serif; }
li { margin-bottom: 20px; }

%button {
  border-radius: 3px;
  display: inline-block;
  line-height: 1;
  padding: 10px 30px;
  text-decoration: none;
}

%button--primary {
  @extend %button;
  background-color: $primary-color;
  border: 1px solid $primary-color;
  color: #fff;
}

%button--secondary {
  @extend %button--primary;
  background-color: $secondary-color;
  border: 1px solid $secondary-color;
  color: #fff;
  font-size: em(12);
  padding: 6px 20px;
}

%button--open {
  @extend %button;
  background: none;
}

.button,
.button:visited {
  @extend %button;
}

.button--primary,
.button--primary:visited {
  @extend %button--primary;
}

.button--secondary,
.button--secondary:visited {
  @extend %button--secondary;
}

.button--open,
.button--open:visited {
  @extend %button--open;
}

.button--open.button--primary {
  color: $primary-color;
}

.button--open.button--secondary {
  color: $secondary-color;
}

SassMeister-output.css

body {
  background: lightblue;
  font-family: sans-serif; }

li {
  margin-bottom: 20px; }

.button--secondary, .button--secondary:visited, .button--primary, .button--primary:visited, .button--open, .button--open:visited, .button, .button:visited {
  border-radius: 3px;
  display: inline-block;
  line-height: 1;
  padding: 10px 30px;
  text-decoration: none; }

.button--secondary, .button--secondary:visited, .button--primary, .button--primary:visited {
  background-color: blue;
  border: 1px solid blue;
  color: #fff; }

.button--secondary, .button--secondary:visited {
  background-color: red;
  border: 1px solid red;
  color: #fff;
  font-size: em(12);
  padding: 6px 20px; }

.button--open, .button--open:visited {
  background: none; }

.button--open.button--primary {
  color: blue; }

.button--open.button--secondary {
  color: red; }

SassMeister-rendered.html

<ol>
  <li><a href="#">Plain link</a></li>
  <li><a class="button" href="#">Button</a></li>
  <li><a class="button button--primary" href="#">Button primary</a></li>
  <li><a class="button button--primary button--open" href="#">Button primary open</a></li>
  <li><a class="button button--secondary" href="#">Button secondary</a></li>
  <li><a class="button button--secondary button--open" href="#">Button secondary open</a></li>
</ol>