Sass hexagon mixin. Inspired by http://csshexagon.com/

hexagon-mixin.sass

@mixin hexagon($color: #333, $size: 200)

  position: relative
  width: $size + unquote("px")
  height: $size * 0.577 + unquote("px")
  background-color: $color
  margin: $size * 0.288 + unquote("px") 0

  &:before, &:after
    content: ""
    position: absolute
    left: 0
    width: 0
    border-left: $size * 0.5 + unquote("px") solid transparent
    border-right: $size * 0.5 + unquote("px") solid transparent

  &:before
    bottom: 100%
    border-bottom: $size * 0.288 + unquote("px") solid $color

  &:after
    top: 100%
    width: 0
    border-top: $size * 0.288 + unquote("px") solid $color