SASS Mixins

mixins.scss

// Appearance
// Default styling to form elements
@mixin appearance ($value) {
  -webkit-appearance: $value;
     -moz-appearance: $value;
          appearance: $value;
}

@mixin arrow($direction: up, $size: 5px, $color: #444) {
  width: 0;
  height: 0;
  @if ($direction == left) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;  
    border-right: $size solid $color;
  }
  @else if ($direction == right) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;  
    border-left: $size solid $color;
  }
  @else if ($direction == down) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
  }
  @else {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }
}