Generated by SassMeister.com.

SassMeister-input-HTML.haml

%span.component

SassMeister-input.scss

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

$icon-list: (
    fakestore-logo:'\e601',
    cart:          '\e602',
    search:        '\e603',
    left-arrow:    '\e604',
    right-arrow:   '\e605',
    pencil:        '\e60a',
    plus:          '\e60b',
    chart:         '\e60c',
    credit-card:   '\e606',
    location:      '\e607',
    shipping:      '\e608',
    triangle-down: '\e609',
    speech-bubble: '\f075',
    check-mark:    '\f05d',
    exclamation:   '\f06a',
    x:             '\f00d',
    envelope:      '\e600',
    facebook:      '\f082',
    twitter:       '\f081',
    pinterest:     '\f0d3',
    google-plus:   '\f0d4'
);

@each $name, $glyph-code in $icon-list { /* [1] */
    %icon--#{$name} { &:before { content: '#{$glyph-code}'; } } /* [2] */
    .icon--#{$name} { @extend %icon--#{$name}; } /* [3] */
}

SassMeister-output.css

@charset "UTF-8";
/* [1] */
.icon--fakestore-logo:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--cart:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--search:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--left-arrow:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--right-arrow:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--pencil:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--plus:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--chart:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--credit-card:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--location:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--shipping:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--triangle-down:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--speech-bubble:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--check-mark:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--exclamation:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--x:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--envelope:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--facebook:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--twitter:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--pinterest:before {
  content: "";
}

/* [2] */
/* [3] */
/* [1] */
.icon--google-plus:before {
  content: "";
}

/* [2] */
/* [3] */

SassMeister-rendered.html

<span class='component'></span>