When SASS becomes a sledgehammer for a nail

css.css

/* This is a shorter way to do it with css */
[class*="btn"] {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
.btn--twitter {
  color: #fff;
  background: #55acee;
}
.btn--facebook {
  color: #fff;
  background: #3b5998;
}

html.html

<a href="#" class="btn--twitter">Twitter</a>
<a href="#" class="btn--facebook">Facebook</a>

sass.scss

/* This is what this article proposed
   http://thesassway.com/intermediate/using-object-oriented-css-with-sass */
%button {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%twitter-background {
  color: #fff;
  background: #55acee;
}
%facebook-background {
  color: #fff;
  background: #3b5998;
}

.btn {
  &--twitter {
    @extend %button;
    @extend %twitter-background;
  }
  &--facebook {
    @extend %button;
    @extend %facebook-background;
  }
}