gistfile1.sass

%unstyled-anchor {
  text-decoration: none;
  color: inherit;
}

%button {
  @extend %unstyled-anchor;
  font-weight: bold;
  padding: 1em 3em;
  text-align: center;
}

%button--primary {
  background-color: hotpink;
  color: #fff;
}

.sign-up {}
.sign-up__cta {
  @extend %button--primary;
}

.sign-in {}
.sign-in__cta {
  @extend %button;
}

gistfile2.html

<div class="sign-up">
  <button class="sign-up__cta">Sign up</button>
</div>

<div class="sign-in">
  <button class="sign-in__cta">Sign in</button>
</div>

gistfile3.css

/* Resulting CSS */

.sign-up__btn {
  background-color: hotpink;
  color: #fff;
}

.sign-up__btn,
.sign-in__btn {
  font-weight: bold;
  padding: 1em 3em;
  text-align: center;
}

.sign-up__btn,
.sign-in__btn {
  text-decoration: none;
  color: inherit;
}