Generated by SassMeister.com.

SassMeister-input.scss

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


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

/* 
* Notice how the padding and other static styles in the
* @extend are comma separated here and only printed once?
* Woot woot! 
*/

@mixin button($color) {
  background: $color;
  @extend %btn;
  &:hover {
    background: darken($color, 20%);
  }
}

%btn {
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
}

input {
  &[type="submit"] {
    @include button($secondary-color);
  }
}

.btn-main {
  @include button($primary-color);
}

SassMeister-output.css

/* 
* Notice how the padding and other static styles in the
* @extend are comma separated here and only printed once?
* Woot woot! 
*/
input[type="submit"], .btn-main {
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
}

input[type="submit"] {
  background: #61ce3c;
}
input[type="submit"]:hover {
  background: #3a8321;
}

.btn-main {
  background: #4a8bbd;
}
.btn-main:hover {
  background: #2b5576;
}