Generated by SassMeister.com.

SassMeister-input-HTML.jade

.arrow

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

$arrow-directions: (
  up: -45deg,
  right: 45deg,
  down: 135deg,
  left: 225deg
);

$arrow-sizes: (
  small: .6em,
  medium: .8em,
  large: 1em
);

$arrow-weights: (
  light: 1px,
  normal: 2px,
  heavy: 4px
);
  
$arrow-widths: (
  narrow: 10deg,
  normal: false,
  wide: -10deg
);

@function validate-value($map, $key) {
  @if map-has-key($map, $key) {
    @return map-get($map, $key);
  } @else {
    @error "Sorry, #{$key} isn't a valid value.";
    @return false;
  }
}
@mixin arrow(
  $color: "currentColor",
  $direction:"up",
  $size:"medium",
  $weight:"normal",
  $width:"normal"
) {
  // get all values from maps
  $rotate: validate-value($arrow-directions, $direction);
  $height-width: validate-value($arrow-sizes, $size);
  $border-width: validate-value($arrow-weights, $weight);
  $skew: validate-value($arrow-widths, $width);
  
  $transform: "rotate(#{$rotate})";
  @if $skew {
    $transform: $transform + " skewX(#{$skew}) skewY(#{$skew})"
  }
  
  display: inline-block;
  width: $height-width;
  height: $height-width;
  border: $color solid;
  border-width: $border-width $border-width 0 0;
  border-radius: 1px;
  transform: unquote($transform);
}

.arrow {
  @include arrow(blue, right, large, heavy);
}

SassMeister-output.css

.arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: blue solid;
  border-width: 4px 4px 0 0;
  border-radius: 1px;
  transform: rotate(45deg);
}

SassMeister-rendered.html

<div class="arrow"></div>