Very simple and pragmatic mixin for applying hover and active states in one go

hover.scss

// When we give an element some 'attention'

@mixin attention() {
  &:hover,
  &:active,
  &:focus {
    @content;
  }
}

a {
  font-weight: bold;
  text-decoration: none;
  color: #c00;

  @include attention() {
    outline: none;
    color: #09f;
  }
}

.btn {
  background-color: #09f;

  @include attention() {
    background-color: darken(#09f, 10%);
  }
}