Generated by SassMeister.com.

SassMeister-input.scss

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

$primary-color: #4a8bbd;
$secondary-color: #61ce3c;

/* This is NOT best practice. All rules in mixins should 
* contain a dynamic value otherwise the regular styles will
* print over and over instead of being applies to comma 
* separated styles. Use @extend instead!
*
* See here for proper use of @extend:
* 
*/

@mixin button($color) {
  background: $color;
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
  &:hover {
    background: darken($color, 20%);
  }
}

.btn-main {
  /* See how the padding is here...*/
  @include button($primary-color);
}

.btn-main {
  /* And here?*/
  @include button($secondary-color);
}

SassMeister-output.css

/* This is NOT best practice. All rules in mixins should 
* contain a dynamic value otherwise the regular styles will
* print over and over instead of being applies to comma 
* separated styles. Use @extend instead!
*
* See here for proper use of @extend:
* 
*/
.btn-main {
  /* See how the padding is here...*/
  background: #4a8bbd;
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
}
.btn-main:hover {
  background: #2b5576;
}

.btn-main {
  /* And here?*/
  background: #61ce3c;
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
}
.btn-main:hover {
  background: #3a8321;
}