-100.times do
  .tile

*,
*:before,
*:after {
  box-sizing: border-box;
}

$body-bg: #fd382b;
$light: rgba(#fff, .8);
$secondary: adjust-hue($body-bg, 20);
$w: .25em;

body {
  font-size: 100px;
  background: $body-bg;
  margin-top: -2.5em;
  margin-left: -2.5em;
  margin-right: -2.5em;
  overflow: hidden;
}

.tile {
  width: 1em;
  height: 1em;
  border: $w solid $light;
  position: relative;
  background: $light;
  float: left;
  margin: $w * 1.25;
  box-shadow: inset 0 0 0 $w/2 $body-bg;
  //transform: rotate(20deg); This looks cool too!

  &:before,
  &:after {
    content: '';
    position: absolute;
    display: block;   
  }

  &:before {
    width: 1.5em;
    height: 1.5em;
    left: $w * -2;
    top: $w * -2;
    border-style: dashed;
    border-color:  $light;
    border-width: $w * .5;
  }
  
  &:after {
    width: inherit;
    height: inherit;
    left: 225%;
    background: $secondary;
  }

}