SASS Hexagon Mixin

hexagon.scss

@mixin hexagon-flat-top($width: 60px, $bg-color: black, $text-color: white) {
  // We do the calculations first so we can use meaningful variable names.
  $hexagon-width: $width;
  $sqrt3: 1.74; // Needed to calculate the length of the longer of the
                // non-hypotenuse side of the right triangle that results when
                // you divide the larger border triangles in two.
  $hexagon-border-tb: ($hexagon-width * 0.5) * $sqrt3;
  $hexagon-height: $hexagon-border-tb * 2;
  $hexagon-border-lr: $hexagon-width / 2;
  background-color: $bg-color;
  color: $text-color;
  display: block;
  height: $hexagon-height;
  position: relative;
  text-align: center;
  width: $hexagon-width;
  &:before,
  &:after {
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: $hexagon-border-tb;
    border-top-color: transparent;
    border-top-style: solid;
    border-top-width: $hexagon-border-tb;
    content: "";
    height: 0;
    position: absolute;
    top: 0px;
    width: 0;
  }
  &:before {
    border-right-color: $bg-color;
    border-right-style: solid;
    border-right-width: $hexagon-border-lr;
    left: -$hexagon-border-lr;
  }
  &:after {
    border-left-color: $bg-color;
    border-left-style: solid;
    border-left-width: $hexagon-border-lr;
    right: -$hexagon-border-lr;
  }
  > .hexagon--content {
    // We need this inner div because we want vertcally centered hexagon
    // content, but we also want to absolutely position the hexagon.
    display: table-cell;
    height: $hexagon-height;
    vertical-align: middle;
  }
}