Cfrtjryk

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'{

    &:after {

      content:$unicode;

      font-family:"FontAwesome";

      font-size:$size;

      color:$color;

      font-weight:$weight;

      margin:$margin;

      @content;

    }

  }

  @if $type == 'before' {

    &: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';

  }



  &:#{$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' {

  &:#{$type} {

    content:$unicode;

    font-family:"FontAwesome";

    font-size:$size;

    color:$color;

    font-weight:$weight;

    margin:$margin;

    @content;

  }

}

I'm not as familiar with SASS, but why not pass $type directly:

&:#{$type} {

  content:$unicode;

  font-family:"FontAwesome";

  font-size:$size;

  color:$color;

  font-weight:$weight;

  margin:$margin;

  @content;

}