Hexagon (+ shadow) sass mixin

_helpers.scss

////////////////////////////////////////
// Plain SASS Trigonometry Algorithm  //
////////////////////////////////////////

$pi: 3.14159265359;
$_precision: 10;

@function pow($base, $exp) {
  $value: $base;
  @if $exp > 1 {
    @for $i from 2 through $exp {
      $value: $value * $base;
    }
  }
  @if $exp < 1{
    @for $i from 0 through -$exp {
      $value: $value / $base;
    }
  }
  @return $value;
}

@function fact($num) {
  $fact: 1;
  @if $num > 0{
    @for $i from 1 through $num {
      $fact: $fact * $i;
    }
  }
  @return $fact;
}

@function _to_unitless_rad($angle) {
  @if unit($angle) == "deg" {
    $angle: $angle / 180deg * $pi;
  }
  @if unit($angle) == "rad" {
    $angle: $angle / 1rad;
  }
  @return $angle;
}

@function sin($angle) {
  $a: _to_unitless_rad($angle);
  $sin: $a;
  @for $n from 1 through $_precision {
    $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1) ) * pow($a, (2 * $n + 1));
  }
  @return $sin;
}

@function cos($angle) {
  $a: _to_unitless_rad($angle);
  $cos: 1;
  @for $n from 1 through $_precision {
    $cos: $cos + ( pow(-1,$n) / fact(2*$n) ) * pow($a,2*$n);
  }
  @return $cos;
}

@function tan($angle) {
  @return sin($angle) / cos($angle);
}



/////////////////////////////////
// Other SASS Math Algorithms  //
/////////////////////////////////
@function sqrt($r) {
  $x0: 1;
  $x1: $x0;

  @for $i from 1 through 10 {
    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
    $x0: $x1;
  }

  @return $x1;
}

//////////////////////////////////
// decimal-round                //
// Rounding to N decimal places //
//////////////////////////////////
@function decimal-round($number, $digits: 0, $mode: round) {
    $n: 1;
    // $number must be a number
    @if type-of($number) != number {
        @warn '#{ $number } is not a number.';
        @return $number;
    }
    // $digits must be a unitless number
    @if type-of($digits) != number {
        @warn '#{ $digits } is not a number.';
        @return $number;
    } @else if not unitless($digits) {
        @warn '#{ $digits } has a unit.';
        @return $number;
    }
    @if $digits > 0 {
        @for $i from 1 through $digits {
            $n: $n * 10;
        }
    }
    // $mode
    @if $mode == round {
        @return round($number * $n) / $n;
    } @else if $mode == ceil {
        @return ceil($number * $n) / $n;
    } @else if $mode == floor {
        @return floor($number * $n) / $n;
    } @else {
        @warn '#{ $mode } is undefined keyword.';
        @return $number;
    }
}

_mixin.scss

// if you do not use the compass:
@import 'helpers';
// else you use the compass, copy the function 'decimal-round' from the file and paste it here

@mixin hexagon($hx-size: 300px, $hx-color: #fff, $hx-shadow: 0 0 40px rgba(0,0,0,0.04)) {
  $hx-height: decimal-round(($hx-size / 2) / cos(30deg), 2, round);
  $hx-y-scale: decimal-round(tan(30deg), 4, round);
  $hx-unscaled-size: decimal-round($hx-size / sqrt(2), 2, round);
  $hx-margin: decimal-round(($hx-size / 2) * $hx-y-scale, 2, round);

  position: relative;
  width: $hx-size;
  height: $hx-height;
  margin-top: $hx-margin;
  margin-bottom: $hx-margin;
  background-color: $hx-color;
  box-shadow: $hx-shadow;

  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;

    width: $hx-unscaled-size;
    height: $hx-unscaled-size;

    background-color: $hx-color;
    box-shadow: $hx-shadow;

    transform-origin: 0 0;
    transform: scaleY($hx-y-scale) rotate(-45deg);
  }

  &:before {
    top: 0;
  }

  &:after {
    top: $hx-height;
  }

  span {
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: inherit;
  }
}

index.html

<div class="hexagon">
  <span></span>
  <div class="hexagon__text">TEXT</div>
</div>

style.scss

@import 'mixin';

.hexagon {
  @include hexagon(164px, #fff, 0 0 40px rgba(0,0,0,0.04));
  // center
  margin-left: auto;
  margin-right: auto;

  &__text {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}