Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

%button {
    background: #45beff;
    border: none;
    padding: 1em 2em;
    font-size: 16px;

    &:hover {
        opacity: 0.75;
    }
}

%button--green {
    background: #3efa95;
}

%button--red {
    background: #ff3a6a;
}

%button--large {
    font-size:20px;
}

%button--rounded {
    border-radius: 10px;
}

.button {
    @extend %button;

    &.-green {
        @extend %button--green;
    }

    &.-large {
        @extend %button--large;
    }
}


.button--save {
    @extend %button;
    @extend %button--large;
    @extend %button--rounded;
    @extend %button--green;
}   

.button--delete {
    @extend %button;
    @extend %button--large;
    @extend %button--rounded;
    @extend %button--red;
}

SassMeister-output.css

.button, .button--save, .button--delete {
  background: #45beff;
  border: none;
  padding: 1em 2em;
  font-size: 16px;
}
.button:hover, .button--save:hover, .button--delete:hover {
  opacity: 0.75;
}

.button.-green, .button--save {
  background: #3efa95;
}

.button--delete {
  background: #ff3a6a;
}

.button.-large, .button--save, .button--delete {
  font-size: 20px;
}

.button--save, .button--delete {
  border-radius: 10px;
}