Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

// 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%);
    }

}

SassMeister-output.css

a {
  font-weight: bold;
  text-decoration: none;
  color: #c00;
}
a:hover, a:active, a:focus {
  outline: none;
  color: #09f;
}

.btn {
  background-color: #09f;
}
.btn:hover, .btn:active, .btn:focus {
  background-color: #007acc;
}