Generated by SassMeister.com.

SassMeister-input.scss

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

$icon-names:
(alert "\e600")
(arrow-down-left "\e602")
(arrow-down-right "\e602")
  (arrow-down "\e603")
  (arrow-left "\e604")
  (arrow-right "\e605")
  (arrow-up-left "\e606")
  (arrow-up-right "\e607")
  (arrow-up "\e608")
  (book "\e609")
  (bookmark "\e60a")
  (books "\e60b")
  (calendar "\e60c")
  (camera "\e60d")
  (carrot-down "\e60e")
  (carrot-left "\e60f")
  (carrot-right "\e610")
  (carrot-up "\e611")
  (chart-line "\e612")
  (chart-pie "\e613")
  (check-circle "\e614")
  (check "\e615")
  (clock "\e616")
  (cloud-download "\e617")
  (cloud-upload "\e618")
  (cloud "\e619")
  (comment "\e61a")
  (delicious "\e61b")
  (download "\e61c")
  (email "\e61d")
  (facebook "\e61e")
  (file "\e61f")
  (film "\e620")
  (fullscreen-close "\e621")
  (fullscreen-open "\e622")
  (gear "\e623")
  (googleplus "\e624")
  (grid "\e625")
  (headphones "\e626")
  (heart "\e627")
  (help "\e628")
  (home "\e629")
  (info "\e62a")
  (instagram "\e62b")
  (journey "\e62c")
  (lightbulb "\e62d")
  (linkedin "\e62e")
  (list "\e62f")
  (location "\e630")
  (menu "\e631")
  (minus-circle "\e632")
  (minus "\e633")
  (more "\e634")
  (paperclip "\e635")
  (pause "\e636")
  (pencil "\e637")
  (phone-mobile "\e638")
  (phone "\e639")
  (pinterest "\e63a")
  (play "\e63b")
  (plus-circle "\e63c")
  (plus "\e63d")
  (pop-out "\e63e")
  (print "\e63f")
  (profile-group "\e640")
  (profile "\e641")
  (refresh "\e642")
  (rss "\e643")
  (search "\e644")
  (share "\e645")
  (star "\e646")
  (stumble-upon "\e647")
  (text-size "\e648")
  (tumblr "\e649")
  (twitter "\e64a")
  (upload "\e64b")
  (vimeo "\e64c")
  (volume-1 "\e64d")
  (volume-2 "\e64e")
  (volume-3 "\e64f")
  (volume-mute "\e650")
  (world "\e651")
  (wrench "\e652")
  (write "\e653")
  (x-circle "\e654")
  (x "\e655")
  (youtube "\e656")
  (zoom-in "\e657")
  (zoom-out "\e658");
  
@each $icon-name in $icon-names {
  .mck-icon__#{index($icon-name, 1)}::before, .mck-icon__#{index($icon-name, 1)}::after {
    content: index($icon-name, 2);
  }
}

@mixin all-icons {
  [class^="icon__"], [class*="icon__"] {
    @content;
  }
}

@include all-icons {
  color: red;
}

@mixin icon($icon, $pseudo) {
  [class^="icon__#{$icon}"]::#{$pseudo}, [class*="icon__#{$icon}"]::#{$pseudo} {
    @content;
  }
}

@include icon(arrow, after){
  width: 10px;
}

@mixin icon-color($color, $icon: '') {
  [class^="icon__#{$icon}"], [class*="icon__#{$icon}"] {
    color: $color;
    @content;
  }
}

@include icon-color(blue, alert) {
  width: 40px;
}

SassMeister-output.css

[class^="icon__"], [class*="icon__"] {
  color: red;
}

[class^="icon__arrow"]::after, [class*="icon__arrow"]::after {
  width: 10px;
}

[class^="icon__alert"], [class*="icon__alert"] {
  color: blue;
  width: 40px;
}