Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// ----


%icon {
	font-family: 'zenicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

$icon: (
	ZEN-three-arrows: "\e600",
	ZEN-search: "\e601",
	ZEN-menu: "\e602",
	ZEN-arrow-up: "\e603",
	ZEN-arrow-right: "\e604",
	ZEN-arrow-left: "\e605",
	ZEN-arrow-down: "\e606"
);


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


.test {
  @include icon(ZEN-menu);
}


.test2 {
  @include icon(ZEN-arrow-right);
}

SassMeister-output.css

.test, .test2 {
  font-family: 'zenicons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.test:before {
  content: "\e602";
}

.test2:before {
  content: "\e604";
}