Rotated SCSS Grid

A CSS example on how to generate a grid where all the cells are rotated 45deg. I'm taking full advantage of SCSS

by Alexandre Simoes

HTML

<ul class="fancygrid">
    <li class="rotate pos-0-0">Item 1</li>
    <li class="rotate pos-0-1">Item 2</li>
    <li class="rotate pos-1-0">Item 3</li>
    <li class="rotate pos-1-4">Item 4</li>
    <li class="rotate pos-2-1">Item 3</li>
    <li class="rotate pos-3-3">Item 4</li>
</ul>

SCSS

.fancygrid{
    
    $rows: 5;       /* grid rows amount */
    $columns: 5;    /* grid columns amount */
    
    $width: 100px;   /* square width */ 
    $height: 100px;  /* square height */
    
    $vmargin: 55px; /* vertical margin between squares */
    $hmargin: 55px; /* horizintal margin between squares */
    
    $top: 25px;     /* top left corner coord of the 0-0 square */
    $left: 25px;   /* top left corner coord of the 0-0 square */
    
    @mixin position($row, $col) {
        left: $left + $width/2 + $width*$col + $hmargin*$col;
        top: $top + $height/2 + $height*$row + $vmargin*$row;
    }
    
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
              border-radius: $radius;
    }
    
    @mixin rotate($degrees){
        -ms-transform: rotate($degrees); /* IE 9 */
        -webkit-transform: rotate($degrees); /* Chrome, Safari, Opera */
        transform: rotate($degrees);
    }
    
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none;
    
    li {
        display: block;
        position: absolute;
        margin: 0;
        padding: 0;
        border: solid 1px #f00;
        width: $width;
        height: $height;
        @include border-radius(10px);
        @include rotate(45deg);
    }
    
    @for $r from 0 through $rows{
        @for $c from 0 through $columns {
            .pos-#{$r}-#{$c}{
                @include position(#{$r},#{$c});
            }
        }
    }

}