Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

////
//// The Hatchd Eggbox icon-font set
//// @author Hatchd Digital
//// Generated by grunt-webfont
////

/// Eggbox icon mapping
/// @type Map
$eggbox-icons: (
    'alert-fill' : '\f101',
    'arrow-full-down' : '\f102'
);

/// Default eggbox fallback settings
/// @type Map
$eggbox-fallbacks:(
  'color' : '000000',
  'size' : 16,
  'url' : '../images/eggbox'
);

/// Call an eggbox icon to use
/// @author Jack Armley
/// @param {String} $icon [false] - Icon to use, from `$eggboxicons`
/// @param {String} $position [before] - Pseudo element to use (before or after)
/// @param {Boolean} $styles [true] - Include styles (true or false)
/// @requires {Variable} $eggboxicons
@mixin eggbox($icon: false, $position: before, $styles: true) {
  &:#{$position} {
    @if $icon {
      content: map-get($eggbox-icons, $icon);
    }
    @if $styles{
      display:inline-block;
      font:{
        family:"eggbox";
        weight:normal;
        style:normal;
      };
      text:{
        decoration:inherit;
        transform:none;
      };
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      speak:none;
    }
  }
}

/// Provide an image fallback for an eggbox icon
/// Should only really come into play for IE7 (so very rarely)
/// It only outputs a background-image, so usage is flexible
/// @author Jack Armley
/// @group Eggbox
/// @param {String} $icon [false] - Icon to use, from `$eggboxicons`
/// @param {Map|Variable} $fallbacks [$eggbox-fallbacks] - Fallback properties map to use
@mixin eggbox-imgfallback($icon: false, $fallbacks: $eggbox-fallbacks){
  
  // If a different map has been specified, merge
  // it with the $eggbox-fallbacks map for this instance
  @if $fallbacks not $eggbox-fallbacks{
    $fallbacks: map-merge($eggbox-fallbacks,$fallbacks);
  }
  
  // Fallback URL
  // @type Variable
  $fallback-url: '#{map-get($fallbacks,url)}/#{$icon}-#{map-get($fallbacks,size)}x#{map-get($fallbacks,size)}-#{map-get($fallbacks,color)}.png';
  background-image: url('#{$fallback-url}');
  
}

/**
* Eggbox @font-face declaration
**/
@font-face {
  font-family:"eggbox";
  src:url("../fonts/eggbox/eggbox.eot");
  src:url("../fonts/eggbox/eggbox.eot?#iefix") format("embedded-opentype"),
	url("../fonts/eggbox/eggbox.woff") format("woff"),
	url("../fonts/eggbox/eggbox.ttf") format("truetype"),
	url("../fonts/eggbox/eggbox.svg?#eggbox") format("svg");
  font-weight:normal;
  font-style:normal;
}

/**
 * Eggbox classes
 * An alternative to using the mixin 
 * (which is the preferred option)
 */
[data-eggbox]{
  @include eggbox;
}
@each $key, $value in $eggbox-icons{
    [data-eggbox="#{$key}"]{
      @include eggbox($key,before,false);
    }
}

/**
* Test mixin
**/

/// Custom eggbox override test
/// @type Variable
$eggbox-large:(
  'size' : 24,
  'color' : 'red'
);

p{
  @include eggbox('alert-fill','after',false );
}
p{
  @include eggbox('arrow-full-down','before',true );
  @include eggbox-imgfallback('arrow-full-down',$eggbox-large);
}

SassMeister-output.css

@charset "UTF-8";
/**
* Eggbox @font-face declaration
**/
@font-face {
  font-family: "eggbox";
  src: url("../fonts/eggbox/eggbox.eot");
  src: url("../fonts/eggbox/eggbox.eot?#iefix") format("embedded-opentype"), url("../fonts/eggbox/eggbox.woff") format("woff"), url("../fonts/eggbox/eggbox.ttf") format("truetype"), url("../fonts/eggbox/eggbox.svg?#eggbox") format("svg");
  font-weight: normal;
  font-style: normal;
}
/**
 * Eggbox classes
 * An alternative to using the mixin 
 * (which is the preferred option)
 */
[data-eggbox]:before {
  display: inline-block;
  font-family: "eggbox";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}

[data-eggbox="alert-fill"]:before {
  content: "";
}

[data-eggbox="arrow-full-down"]:before {
  content: "";
}

/**
* Test mixin
**/
p:after {
  content: "";
}

p {
  background-image: url("../images/eggbox/arrow-full-down-24x24-red.png");
}
p:before {
  content: "";
  display: inline-block;
  font-family: "eggbox";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}