2
\$\begingroup\$

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

\$\endgroup\$
1
\$\begingroup\$

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;
  }
}
\$\endgroup\$
0
\$\begingroup\$

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;
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.