Diamonds mixin

gistfile1.sass

// Fluid Squares
// -------------------------------------------------------
@mixin box($box-size: 3rem, $fluid: false) {
  display: inline-block;
  position: relative;
  width: rems-as-pixels($box-size);
  width: $box-size;
  text-align: center;
  @if($fluid) {
    height: 0;
    padding-bottom: rems-as-pixels($box-size);
    padding-bottom: $box-size;
  }
  @else {
    height: $box-size;
  }
 
  .box--diamond__content {
    width: rems-as-pixels($box-size);
    width: $box-size;
    height: rems-as-pixels($box-size);
    height: $box-size;
    i + strong {
      margin-top: 1rem;
    }
    strong {
      display: block;
      color: #fff;
      line-height: 1.8rem;
    }
  }
  .box--diamond__img {
    border: 0;
    display: block;
    width: rems-as-pixels($box-size * 1.4);
    width: $box-size * 1.4;
    margin-top: rems-as-pixels(-$box-size * 0.22);
    margin-top: -$box-size * 0.22;
    margin-left: rems-as-pixels(-$box-size * 0.22);
    margin-left: -$box-size * 0.22;
  }
}
 
// Diamonds
// -------------------------------------------------------
@mixin diamond($degrees: 45deg) {
  display: inline-block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  @include rotate($degrees);
  @include backface-visibility(hidden);
  @include perspective(1000);
  
  .box--diamond__content {
    display: table-cell;
    vertical-align: middle;
    padding: rems-as-pixels(1rem);
    padding: 1rem;
    @include rotate(-$degrees);
  }
  img {
    display: block;
    @include rotate(-$degrees);
  }
}
 
// Rem - Px fallback
// -------------------------------------------------------
@function parseInt($n) { /* [2] */
  @return $n / ($n * 0 + 1);
}
 
@mixin rem($property, $values) {
  $px : (); /* [3] */
  $rem: (); /* [3] */
  
  @each $value in $values { /* [4] */
   
    @if $value == 0 or $value == auto { /* [5] */
      $px : append($px , $value);
      $rem: append($rem, $value);
    }
    
    @else { 
      $unit: unit($value); /* [6] */
      $val: parseInt($value); /* [6] */
      
      @if $unit == "px" { /* [7] */
        $px : append($px,  $value);
        $rem: append($rem, ($val / 10 * 1rem));
      }
      
      @if $unit == "rem" { /* [7] */
        $px : append($px,  ($val * 10 * 1px));
        $rem: append($rem, $value);
      }
    }
  }
  
  #{$property}: $px;  /* [8] */
  #{$property}: $rem; /* [8] */
}
 
@function rems-as-pixels($value) {
  $px : (); /* [3] */
  $rem: (); /* [3] */
 
  $unit: unit($value); /* [6] */
  $val: parseInt($value); /* [6] */
  $px : append($px,  ($val * 10 * 1px));
  
  @return $px;
}