Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

//
// Code from http://thesassway.com/intermediate/a-standard-module-definition-for-sass
//
// # Thoughts
//
// ## Pros
//
// - clean scss
// - easy to reason about
// - sort of a no-nonsense aproach to css (no ambiguity)
//
// ## Cons
//
// - `buttons` is an all-or-nothing mixin
// - output repeats rules, e.g. `font`, `padding`, `color`
// - does take advantag of `@extend` to group selectors
//
// This could be refactored to output rules with % placeholder selectors,
// using @extend to create the actual rules, producing more compact css.
//

// Primary mixin
@mixin buttons {
  a.button, button {
    @include button(black, silver);
    &.blue  { @include button(white, blue); }
    &.red   { @include button(white, red); }
    &.green { @include button(white, green); }
  }
};

// Button mixin
@mixin button($text-color, $bg-color) {
  font: 12px bold sans-serif;
  padding: 3px 8px;
  @include color-button($text-color, $bg-color);
  &:hover, &:focus { @include color-button($text-color, lighten($bg-color, 10%)); }
  &:active { background: darken($bg-color, 5%); }
};

// Color button mixin
@mixin color-button($text-color, $bg-color) {
  color: $text-color;
  border: 1px solid mix(black, $bg-color);
};

@include buttons;

SassMeister-output.css

a.button, button {
  font: 12px bold sans-serif;
  padding: 3px 8px;
  color: black;
  border: 1px solid #606060;
}
a.button:hover, a.button:focus, button:hover, button:focus {
  color: black;
  border: 1px solid #6d6d6d;
}
a.button:active, button:active {
  background: #b3b3b3;
}
a.button.blue, button.blue {
  font: 12px bold sans-serif;
  padding: 3px 8px;
  color: white;
  border: 1px solid #00007f;
}
a.button.blue:hover, a.button.blue:focus, button.blue:hover, button.blue:focus {
  color: white;
  border: 1px solid #19197f;
}
a.button.blue:active, button.blue:active {
  background: #0000e6;
}
a.button.red, button.red {
  font: 12px bold sans-serif;
  padding: 3px 8px;
  color: white;
  border: 1px solid #7f0000;
}
a.button.red:hover, a.button.red:focus, button.red:hover, button.red:focus {
  color: white;
  border: 1px solid #7f1919;
}
a.button.red:active, button.red:active {
  background: #e60000;
}
a.button.green, button.green {
  font: 12px bold sans-serif;
  padding: 3px 8px;
  color: white;
  border: 1px solid #004000;
}
a.button.green:hover, a.button.green:focus, button.green:hover, button.green:focus {
  color: white;
  border: 1px solid #005900;
}
a.button.green:active, button.green:active {
  background: #006700;
}