Generated by SassMeister.com.

SassMeister-input-HTML.html

<a href="#" class="btn btn--call-to-action">Call To Action</a>

<div class="form">
  <button class="btn btn--submit">
    <span data-icon="checkmark"></span>
    Submit
  </button>
  <button class="btn btn--secondary">Secondary</button>
  <button class="btn btn--alert">Alert</button>
</div>

<div class="social">
  <a href="#" class="btn btn--twitter">twitter</a>
  <a href="#" class="btn btn--github">github</a>
  <a href="#" class="btn btn--stackoverflow">stackoverflow</a>
  <a href="#" class="btn btn--dribbble">dribbble</a>
  <a href="#" class="btn btn--instagram">instagram</a>
  <a href="#" class="btn btn--soundcloud">soundcloud</a>
</div>

SassMeister-input.scss

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

// Sass Map Magic Demos
// ====================
// Eric Suzanne | @ericmsuzanne


// User Config
// -----------

$icons: (
  skull: "\e18c",
  warning: "\e243",
  checkmark: "\e258",
  instagram: "\e32e",
  twitter: "\e32f",
  dribbble: "\e341",
  github: "\e34c",
  soundcloud: "\e35d",
  stackoverflow: "\e367",

  danger: skull,
  escher: danger,
  godel: escher,
  bach: godel,
  kevin bacon: bach,
);

$colors: (
  dark: #333,
  light: #eee,
  brand: hsl(330, 100%, 50%),
  accent: hsl(195, 100%, 55%),

  text: dark,
  background: light,
  action: accent,
  focus: action (darken: 15%),

  twitter: #00aced,
  instagram: #517fa4,
  stackoverflow: #F47920,
  soundcloud: #FF6600,
  dribbble: #EA4C89,
  github: #4183C4,
);

$base-size: 24px;
$ratio: major-third;

$sizes: (
  normal: 0,
  rhythm: 1,

  h1: 4,
  large: 2,
  medium: normal,
  small: -2,
  shim: .25em,
);

$button-config: ();

$buttons: (
  submit: glow round,
  call-to-action: glow square large block,
  secondary: submit text outline small,
  alert: submit stop skull,
  social: flat pill,
);


// Icons
// -----

@function icon($icon) {
  $icon: map-get($icons, $icon) or $icon;

  @if map-has-key($icons, $icon) {
    $icon: icon($icon);
  }

  @return $icon;
}

@mixin icon($name) {
  &:before {
    @extend %icon;
    content: icon($name);
    @content;
  }
}


// Color
// -----

@function color($color) {
  // Parse arguments
  $color: map-get($colors, $color) or $color;
  $base: nth($color, 1);
  $adjust: if(length($color) > 1, nth($color, 2), ());

  // Recursive check
  $color: if(map-has-key($colors, $base), color($base), $base);

  // Adjustments [consider function-exists() warning]
  @each $function, $values in $adjust {
    $color: call($function, $color, $values...);
  }

  @return $color;
}


// Size
// ----

$ratio-options: (
  octave            : 2,
  major-seventh     : 15/8,
  minor-seventh     : 16/9,
  major-sixth       : 5/3,
  minor-sixth       : 8/5,
  fifth             : 3/2,
  augmented-fourth  : 45/32,
  fourth            : 4/3,
  major-third       : 5/4,
  minor-third       : 6/5,
  major-second      : 9/8,
  minor-second      : 16/15,
);

@function get-size(
  $size
) {
  $size: map-get($sizes, $size) or $size;

  @if map-has-key($sizes, $size) {
    $size: get-size($size);
  }

  @return $size;
}

@function get-ratio(
  $ratio: $ratio
) {
  $ratio: map-get($ratio-options, $ratio) or $ratio;

  @if map-has-key($ratio-options, $ratio) {
    $ratio: get-ratio($ratio);
  }

  @return $ratio;
}

@function size(
  $size
) {
  $size: get-size($size);

  @if unitless($size) {
    $ratio: get-ratio($ratio);
    $size: round($base-size * pow($ratio, $size));
  }

  @return $size;
}


// Render
// ------

@mixin render(
  $css
) {
  @each $key, $value in $css {
    @if type-of($value) == map {
      #{$key} {
        @include render($value);
      }
    } @else if $key == 'extend' {
      @extend #{$value};
    } @else {
      #{$key}: $value;
    }
  }
}


// Parse
// -----

@function parse(
  $shorthand,
  $keywords
){
  @if type-of($shorthand) == map {
    @return $shorthand;
  } @else {
    $return: ();

    @each $item in $shorthand {
      @if type-of($item) == map {
        $return: map-merge($return, $item);
      } @else {
        @each $setting, $options in $keywords {
          @if index($options, $item) {
            $return: map-merge($return, ($setting: $item));
          }
        }
      }
    }

    @return $return;
  }
}


// Buttons
// -------

$btn-defaults: (
  style: flat,
  shape: round,
  display: inline-block,
  color: action,
  icon: false,
  size: medium,
);

$button-options: (
  style: flat glow outline,
  shape: round square pill,
  display: inline block inline-block,
);

@function btn-get(
  $setting,
  $config: $button-config
) {
  @return map-get($config, $setting) or map-get($button-config, $setting) or map-get($btn-defaults, $setting);
}

@function btn-parse(
  $input
) {
  $options: map-merge($button-options, (
    color: map-keys($colors),
    icon: map-keys($icons),
    size: map-keys($sizes),
    preset: map-keys($buttons),
  ));

  $input: parse($input, $options);

  $preset: map-get($input, preset);
  @if map-has-key($buttons, $preset) {
    $preset: btn-parse(map-get($buttons, $preset));
    $input: map-merge($preset, $input);
  }

  @return $input;
}

@function btn-radius(
  $input
) {
  $shape: btn-get(shape, $input);
  @if $shape == round {
    @return size(shim);
  } @else if $shape == pill {
    @return 50em;
  } @else {
    @return 0;
  }
}

@function btn-icons(
  $input
) {
  $output: null;

  $icon: map-get($input, icon);
  @if $icon {
    $output: (
      extend: '%icon',
      content: icon($icon),
      margin-right: .4em,
    );
  }

  @return $output;
}

@function btn-size(
  $input
) {
  $size: size(btn-get(size, $input));
  $padding: .25em 1em;

  @if $size > 24px {
    $padding: 1em;
  } @else if $size < 15px {
    $padding: 0 1em;
  }  

  @return (
    font-size: $size,
    padding: $padding,
  );
}

@mixin button(
  $style
) {
  $input: btn-parse($style);

  $output: map-merge(btn-size($input), (
    display: btn-get(display, $input),
    border-radius: btn-radius($input),
    '&:before': btn-icons($input),
  ));

  $style: 'btn-#{btn-get(style, $input)}';
  @if function-exists($style) {
    $output: map-merge($output, call($style, $input));
  } @else {
    @warn "We don't know how to make #{$style} buttons.";
  }

  @include render($output);
}


// Styles
// ------

@function btn-flat(
  $input
) {
  $color: color(btn-get(color, $input));
  $output: (
    background: $color,
    color: contrast($color),
  );

  @return $output;
}

@function btn-outline(
  $input
) {
  $color: color(btn-get(color, $input));
  $output: (
    border: 2px solid $color,
    color: $color,
  );

  @return $output;
}

@function btn-glow(
  $input
) {
  $color: color(btn-get(color, $input));
  $contrast: contrast($color);
  $output: (
    background: linear-gradient(to top, darken($color, 15%), $color) $color,
    border: 1px solid darken($color, 25%),
    box-shadow: 0 1px 0 rgba(lighten($color, 80%), .5) inset,
    color: $contrast,
    text-shadow: 0 1px 0 rgba(contrast($contrast), .5),
  );

  @return $output;
}


// Additional Helpers
// ------------------

@font-face {
	font-family: 'magic';
	src: url('fonts/magic.eot');
}
@font-face {
	font-family: 'magic';
	src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'),
		 url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
	font-weight: normal;
	font-style: normal;
}

%btn-reset {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  padding: 0;
  text-decoration: none;
  text-shadow: none;
};

%icon {
  font-family: 'magic';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-decoration: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@function brightness($color) {
  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
}

@function contrast(
  $color
) {
  $dark: color(dark);
  $light: color(light);

  $color-brightness: brightness($color);
  $dark-text-brightness: brightness($dark);
  $light-text-brightness: brightness($light);

  @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
}


// Output
// ------

$social: twitter instagram stackoverflow soundcloud dribbble github;

body {
  margin: 0 auto;
  max-width: 25rem;
  font-size: size(normal);
  line-height: size(rhythm);
  text-align: center;

  .btn {
    @extend %btn-reset
  @each $btn, $styles in $buttons {
    .btn--#{$btn} { @include button($styles); }
  }

  @each $site in $social {
    .btn--#{$site} {
      @include button(social $site);
      margin-bottom: size(rhythm);
    }
  }

  .form {
    margin-bottom: size(rhythm);
  }

}

SassMeister-output.css

Invalid CSS after "...tend %btn-reset": expected "}", was "@each $btn, $st..."

SassMeister-rendered.html

<a href="#" class="btn btn--call-to-action">Call To Action</a>

<div class="form">
  <button class="btn btn--submit">
    <span data-icon="checkmark"></span>
    Submit
  </button>
  <button class="btn btn--secondary">Secondary</button>
  <button class="btn btn--alert">Alert</button>
</div>

<div class="social">
  <a href="#" class="btn btn--twitter">twitter</a>
  <a href="#" class="btn btn--github">github</a>
  <a href="#" class="btn btn--stackoverflow">stackoverflow</a>
  <a href="#" class="btn btn--dribbble">dribbble</a>
  <a href="#" class="btn btn--instagram">instagram</a>
  <a href="#" class="btn btn--soundcloud">soundcloud</a>
</div>