Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="foo">
  <li class="fontawesome-twitter">Twitter</li>
  <li class="fontawesome-pinterest">Pinterest</li>
  <li class="fontawesome-facebook">Facebook</li>
  <li class="fontawesome-linkedin">Linkedin</li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
 
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

.foo {
  li {
    list-style: none;
    &:before {
      display: inline-block;
      padding-right: 10px;
      width: 15px;
    }
  }
}

.fontawesome-twitter:before {
  color: blue;
}

.fontawesome-pinterest:before {
  color: red;
}

.fontawesome-facebook:before {
  color: green;
}

.fontawesome-linkedin:before {
  color: purple;
}

SassMeister-output.css

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

.foo li {
  list-style: none;
}
.foo li:before {
  display: inline-block;
  padding-right: 10px;
  width: 15px;
}

.fontawesome-twitter:before {
  color: blue;
}

.fontawesome-pinterest:before {
  color: red;
}

.fontawesome-facebook:before {
  color: green;
}

.fontawesome-linkedin:before {
  color: purple;
}

SassMeister-rendered.html

<ul class="foo">
  <li class="fontawesome-twitter">Twitter</li>
  <li class="fontawesome-pinterest">Pinterest</li>
  <li class="fontawesome-facebook">Facebook</li>
  <li class="fontawesome-linkedin">Linkedin</li>
</ul>