Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$orange:#F17635;
$blue:#547DAA;
$green:#25BAA5;
$red:#e74c3c;
$yellow:#f1c40f;


$colors: 
	"orange" $orange,
	"blue" $blue,
	"green" $green,
	"red" $red,
	"yellow" $yellow;
	
	

@mixin coloring($list, $prefix:'', $parent:true){
  @each $color in $list {
    @if not $parent {
      @at-root {
        .#{$prefix}#{nth($color,1)} {
          $color : nth($color,2) !global;
          @content;
        }
      }
    } @else {
      &.#{$prefix}#{nth($color,1)} {
        $color : nth($color,2) !global;
        @content;
      }
    }
  } // @each
} // @mixin

	
.btn {
  display:block; /* atributo generico del .btn */
  @include coloring($colors,btn-, false) {
    color:darken($color,25);
    background-color:$color;
    &:before {
      border:1px solid $color;
    }
    &:after {
        box-shadow: 2px 2px 0 rgba($color,.25);
    }
  }
}

SassMeister-output.css

.btn {
  display: block;
  /* atributo generico del .btn */
}
.btn-orange {
  color: #9c3d0b;
  background-color: #F17635;
}
.btn-orange:before {
  border: 1px solid #F17635;
}
.btn-orange:after {
  box-shadow: 2px 2px 0 rgba(241, 118, 53, 0.25);
}
.btn-blue {
  color: #2a3e55;
  background-color: #547DAA;
}
.btn-blue:before {
  border: 1px solid #547DAA;
}
.btn-blue:after {
  box-shadow: 2px 2px 0 rgba(84, 125, 170, 0.25);
}
.btn-green {
  color: #105047;
  background-color: #25BAA5;
}
.btn-green:before {
  border: 1px solid #25BAA5;
}
.btn-green:after {
  box-shadow: 2px 2px 0 rgba(37, 186, 165, 0.25);
}
.btn-red {
  color: #921e12;
  background-color: #e74c3c;
}
.btn-red:before {
  border: 1px solid #e74c3c;
}
.btn-red:after {
  box-shadow: 2px 2px 0 rgba(231, 76, 60, 0.25);
}
.btn-yellow {
  color: #796307;
  background-color: #f1c40f;
}
.btn-yellow:before {
  border: 1px solid #f1c40f;
}
.btn-yellow:after {
  box-shadow: 2px 2px 0 rgba(241, 196, 15, 0.25);
}