Generated by SassMeister.com.

SassMeister-input.scss

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

$🌋:(
  🍅: tomato,
  🙊: brown,
  🙈: SaddleBrown,
  🍺: DarkGoldenRod
);

$🍻:(
  🍺:(),
  🍅:(
    🐨: map-get($🌋, 🍅),
  ),
  💩:(
    🐨: map-get($🌋,🙊),
    ⚡️: map-get($🌋,🙈)
  ),
);

// Base button styles via an extend
%🍺 {
  display: inline-block;
  margin: 0;
  padding: .4em .9em;
  border-width: 1px 1px 2px;
  border-style: solid;
  border-radius: em(3);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.15) inset;
  
  &:active {
		border-width: 2px 1px 1px
	}
}
 
// The Mixin
@mixin 🍺($map...) {
  @extend %🍺;
  
  @each $🍕 in $map {
    // Defaults
    $🐸: #fff;
    @if map-has-key($🍕, 🐨) {
      $🐸: map-get($🍕, 🐨);
    }
    $🚀: #fff;
    @if map-has-key($🍕, ⚡️) {
      $🚀: map-get($🍕, ⚡️);
    }


    background: $🐸;
    color: $🚀;
  }
}


// Magic
@each $🍕 in map-keys($🍻) {
  .🎉#{$🍕} {
    @include 🍺(map-get($🍻, $🍕));
  }
}

SassMeister-output.css

@charset "UTF-8";
.🎉🍺, .🎉🍅, .🎉💩 {
  display: inline-block;
  margin: 0;
  padding: .4em .9em;
  border-width: 1px 1px 2px;
  border-style: solid;
  border-radius: em(3);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15) inset;
}
.🎉🍺:active, .🎉🍅:active, .🎉💩:active {
  border-width: 2px 1px 1px;
}

.🎉🍺 {
  background: white;
  color: white;
}

.🎉🍅 {
  background: tomato;
  color: white;
}

.🎉💩 {
  background: brown;
  color: saddlebrown;
}