SASS Mixin to generate a hexagon in CSS

sass-hexagon.scss

// Makes a CSS hexagon! based off of http://csshexagon.com/
// Demo: http://sassmeister.com/gist/98fcf3ce163a97d2ef7e
@mixin hexagon($size, $color, $border: 0) {
  position: relative;
  width: $size; 
  height: ($size * 0.577);
  background-color: $color;
  margin: ($size * 0.288) 0;
  border-left: $border;
  border-right: $border;

  &:before,
  &:after {
    content: "";
    position: absolute;
    @if $border == 0 {
      width: 0;
      left: 0;
      border-left: ($size/2) solid transparent;
      border-right: ($size/2) solid transparent;
    } @else {
      z-index: 1;
      width: ($size * 0.707);
      height: ($size * 0.707);
      -webkit-transform: scaleY(0.5774) rotate(-45deg);
      -ms-transform: scaleY(0.5774) rotate(-45deg);
      transform: scaleY(0.5774) rotate(-45deg);
      background-color: inherit;
      left: ($size * 0.129);
    }
  }

  &:before {
    @if $border == 0 {
      bottom: 100%;
      border-bottom: ($size * 0.288) solid $color;
    } @else {
      top: -($size * 0.353);
      border-top: $border;
      border-right: $border;
    }
  }

  &:after {
    @if $border == 0 {
      top: 100%;
      width: 0;
      border-top: ($size * 0.288) solid $color;
    } @else {
      bottom: -($size * 0.353);
      border-bottom: $border;
      border-left: $border;
    }
  }
}