A CodePen by Bermon Painter. Control Directives - if, else if, else

index.html

<h1>Control Directives - if, else if, else</h1>
<p>One of the features that makes Sass more robust that other preprocessors is the wide variety of control directives.</p>

<button type="submit">Submit to our will</button>

<button type="reset">Start Over</button>

<button class="cancel">Give Up</button>

style.scss

@import "compass";
h1 {
  font-size: 20px; 
}

%button {
  background-color: none;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  margin: 0 5px;
  padding: 12px 24px;
}

@mixin button ($color, $type) {
  @extend %button;
  border-color: darken($color, 20%);
  border-radius: 4px;
  color: lighten($color, 60%);
  @if $type == "flat" {
    background-color: $color;
  } @else if $type == "glossy" {
    background-image: linear-gradient(lighten($color, 10%) 50%, darken($color, 10%) 50%);
  } @else if $type == "gradient" {
    background-image: linear-gradient(lighten($color, 10%), darken($color, 10%));
  }
}
button[type="submit"] {
  @include button(green, gradient);
}
button[type="reset"] {
  @include button(#999, flat);
}
button.cancel {
  @include button(red, glossy);
}