Arrow Sass Mixin

Arrow-Sass-Mixin.markdown

Arrow Sass Mixin

View the demo on CodePen.

License.

index.html

<div class="down-arrow"></div>
<div class="up-arrow"></div>
<div class="left-arrow"></div>
<div class="right-arrow"></div>

style.scss

@mixin arrow($direction, $size, $color) {
  content: ""; // ensures the arrows are visible

  // ensures the size of the arrows is correct:
  width: 0;
  height: 0;

  // Lists for positions/directions
  $directions: ('down', 'left', 'up', 'right');
  $positions: ('top', 'right', 'bottom', 'left');

  // Loop through each position
  @each $position in $positions {
    // Calculate the index of the position in the list
    $index: index($positions, $position);

    // If the position matches the direction, render a colored border
    @if nth($directions, $index) == $direction {
      border-#{$position}: $size solid $color;
    } @else {
      border-#{$position}: $size solid transparent;
    }
  }
}

// examples:

.down-arrow {
  @include arrow(down, 50px, black); 
}

.up-arrow {
  @include arrow(up, 20px, black); 
}

.left-arrow {
  @include arrow(left, 10px, black); 
}

.right-arrow {
  @include arrow(right, 5px, black); 
}

div {
  float: left; 
  margin: 20px;
}