SASS mixin for a font-awesome before/after usage In my SASS I use font-awesome declarations all over the place. I'm in love with it. I've created a SASS mixin for the usage:

I started with the following:

@mixin font-awesome-icon($type, $unicode, $size, $margin, $color, $weight) {
  @if $type == 'after'{
    &amp;:after {
      content:$unicode;
      font-family:"FontAwesome";
      font-size:$size;
      color:$color;
      font-weight:$weight;
      margin:$margin;
      @content;
    }
  }
  @if $type == 'before' {
    &amp;:before {
      content:$unicode;
      font-family:"FontAwesome";
      font-size:$size;
      color:$color;
      font-weight:$weight;
      margin:$margin;
      @content;
    }
  }
}


I then scaled it down further to the following:

@mixin font-awesome-icon($type, $unicode, $size, $margin, $color, $weight) {
  $beforeOrAfter:'';

  @if $type == 'after' {
    $beforeOrAfter:'after';
  }
  @else if $type == 'before' {
    $beforeOrAfter:'before';
  }

  &amp;:#{$beforeOrAfter} {
      content:$unicode;
      font-family:"FontAwesome";
      font-size:$size;
      color:$color;
      font-weight:$weight;
      margin:$margin;
      @content;
    }
}


The usage would something like:

.tater {
@include font-awesome-icon(before,'\f0de',2.1em,0 0 0 3em,orange,300);
}


But I feel I could make the before/after part cleaner. I basically need to determine if it is a 'before' or 'after'.
The $type can be passed in directly to the pseudo-class selector after you check its validity.

@if $type == 'after' or $type == 'before' {
  &amp;:#{$type} {
    content:$unicode;
    font-family:"FontAwesome";
    font-size:$size;
    color:$color;
    font-weight:$weight;
    margin:$margin;
    @content;
  }
}