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, $icon-character in $icon-names {
  .mck-icon__#{$icon-name}::before, .mck-icon__#{$icon-name}::after {
    content: $icon-character;
  }
}

@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

@charset "UTF-8";
.mck-icon__alert::before, .mck-icon__alert::after {
  content: "";
}

.mck-icon__arrow-down-left::before, .mck-icon__arrow-down-left::after {
  content: "";
}

.mck-icon__arrow-down-right::before, .mck-icon__arrow-down-right::after {
  content: "";
}

.mck-icon__arrow-down::before, .mck-icon__arrow-down::after {
  content: "";
}

.mck-icon__arrow-left::before, .mck-icon__arrow-left::after {
  content: "";
}

.mck-icon__arrow-right::before, .mck-icon__arrow-right::after {
  content: "";
}

.mck-icon__arrow-up-left::before, .mck-icon__arrow-up-left::after {
  content: "";
}

.mck-icon__arrow-up-right::before, .mck-icon__arrow-up-right::after {
  content: "";
}

.mck-icon__arrow-up::before, .mck-icon__arrow-up::after {
  content: "";
}

.mck-icon__book::before, .mck-icon__book::after {
  content: "";
}

.mck-icon__bookmark::before, .mck-icon__bookmark::after {
  content: "";
}

.mck-icon__books::before, .mck-icon__books::after {
  content: "";
}

.mck-icon__calendar::before, .mck-icon__calendar::after {
  content: "";
}

.mck-icon__camera::before, .mck-icon__camera::after {
  content: "";
}

.mck-icon__carrot-down::before, .mck-icon__carrot-down::after {
  content: "";
}

.mck-icon__carrot-left::before, .mck-icon__carrot-left::after {
  content: "";
}

.mck-icon__carrot-right::before, .mck-icon__carrot-right::after {
  content: "";
}

.mck-icon__carrot-up::before, .mck-icon__carrot-up::after {
  content: "";
}

.mck-icon__chart-line::before, .mck-icon__chart-line::after {
  content: "";
}

.mck-icon__chart-pie::before, .mck-icon__chart-pie::after {
  content: "";
}

.mck-icon__check-circle::before, .mck-icon__check-circle::after {
  content: "";
}

.mck-icon__check::before, .mck-icon__check::after {
  content: "";
}

.mck-icon__clock::before, .mck-icon__clock::after {
  content: "";
}

.mck-icon__cloud-download::before, .mck-icon__cloud-download::after {
  content: "";
}

.mck-icon__cloud-upload::before, .mck-icon__cloud-upload::after {
  content: "";
}

.mck-icon__cloud::before, .mck-icon__cloud::after {
  content: "";
}

.mck-icon__comment::before, .mck-icon__comment::after {
  content: "";
}

.mck-icon__delicious::before, .mck-icon__delicious::after {
  content: "";
}

.mck-icon__download::before, .mck-icon__download::after {
  content: "";
}

.mck-icon__email::before, .mck-icon__email::after {
  content: "";
}

.mck-icon__facebook::before, .mck-icon__facebook::after {
  content: "";
}

.mck-icon__file::before, .mck-icon__file::after {
  content: "";
}

.mck-icon__film::before, .mck-icon__film::after {
  content: "";
}

.mck-icon__fullscreen-close::before, .mck-icon__fullscreen-close::after {
  content: "";
}

.mck-icon__fullscreen-open::before, .mck-icon__fullscreen-open::after {
  content: "";
}

.mck-icon__gear::before, .mck-icon__gear::after {
  content: "";
}

.mck-icon__googleplus::before, .mck-icon__googleplus::after {
  content: "";
}

.mck-icon__grid::before, .mck-icon__grid::after {
  content: "";
}

.mck-icon__headphones::before, .mck-icon__headphones::after {
  content: "";
}

.mck-icon__heart::before, .mck-icon__heart::after {
  content: "";
}

.mck-icon__help::before, .mck-icon__help::after {
  content: "";
}

.mck-icon__home::before, .mck-icon__home::after {
  content: "";
}

.mck-icon__info::before, .mck-icon__info::after {
  content: "";
}

.mck-icon__instagram::before, .mck-icon__instagram::after {
  content: "";
}

.mck-icon__journey::before, .mck-icon__journey::after {
  content: "";
}

.mck-icon__lightbulb::before, .mck-icon__lightbulb::after {
  content: "";
}

.mck-icon__linkedin::before, .mck-icon__linkedin::after {
  content: "";
}

.mck-icon__list::before, .mck-icon__list::after {
  content: "";
}

.mck-icon__location::before, .mck-icon__location::after {
  content: "";
}

.mck-icon__menu::before, .mck-icon__menu::after {
  content: "";
}

.mck-icon__minus-circle::before, .mck-icon__minus-circle::after {
  content: "";
}

.mck-icon__minus::before, .mck-icon__minus::after {
  content: "";
}

.mck-icon__more::before, .mck-icon__more::after {
  content: "";
}

.mck-icon__paperclip::before, .mck-icon__paperclip::after {
  content: "";
}

.mck-icon__pause::before, .mck-icon__pause::after {
  content: "";
}

.mck-icon__pencil::before, .mck-icon__pencil::after {
  content: "";
}

.mck-icon__phone-mobile::before, .mck-icon__phone-mobile::after {
  content: "";
}

.mck-icon__phone::before, .mck-icon__phone::after {
  content: "";
}

.mck-icon__pinterest::before, .mck-icon__pinterest::after {
  content: "";
}

.mck-icon__play::before, .mck-icon__play::after {
  content: "";
}

.mck-icon__plus-circle::before, .mck-icon__plus-circle::after {
  content: "";
}

.mck-icon__plus::before, .mck-icon__plus::after {
  content: "";
}

.mck-icon__pop-out::before, .mck-icon__pop-out::after {
  content: "";
}

.mck-icon__print::before, .mck-icon__print::after {
  content: "";
}

.mck-icon__profile-group::before, .mck-icon__profile-group::after {
  content: "";
}

.mck-icon__profile::before, .mck-icon__profile::after {
  content: "";
}

.mck-icon__refresh::before, .mck-icon__refresh::after {
  content: "";
}

.mck-icon__rss::before, .mck-icon__rss::after {
  content: "";
}

.mck-icon__search::before, .mck-icon__search::after {
  content: "";
}

.mck-icon__share::before, .mck-icon__share::after {
  content: "";
}

.mck-icon__star::before, .mck-icon__star::after {
  content: "";
}

.mck-icon__stumble-upon::before, .mck-icon__stumble-upon::after {
  content: "";
}

.mck-icon__text-size::before, .mck-icon__text-size::after {
  content: "";
}

.mck-icon__tumblr::before, .mck-icon__tumblr::after {
  content: "";
}

.mck-icon__twitter::before, .mck-icon__twitter::after {
  content: "";
}

.mck-icon__upload::before, .mck-icon__upload::after {
  content: "";
}

.mck-icon__vimeo::before, .mck-icon__vimeo::after {
  content: "";
}

.mck-icon__volume-1::before, .mck-icon__volume-1::after {
  content: "";
}

.mck-icon__volume-2::before, .mck-icon__volume-2::after {
  content: "";
}

.mck-icon__volume-3::before, .mck-icon__volume-3::after {
  content: "";
}

.mck-icon__volume-mute::before, .mck-icon__volume-mute::after {
  content: "";
}

.mck-icon__world::before, .mck-icon__world::after {
  content: "";
}

.mck-icon__wrench::before, .mck-icon__wrench::after {
  content: "";
}

.mck-icon__write::before, .mck-icon__write::after {
  content: "";
}

.mck-icon__x-circle::before, .mck-icon__x-circle::after {
  content: "";
}

.mck-icon__x::before, .mck-icon__x::after {
  content: "";
}

.mck-icon__youtube::before, .mck-icon__youtube::after {
  content: "";
}

.mck-icon__zoom-in::before, .mck-icon__zoom-in::after {
  content: "";
}

.mck-icon__zoom-out::before, .mck-icon__zoom-out::after {
  content: "";
}

[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;
}