Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="tilesCollection">
    <div class="tiles" id="t1">A</div>
    <div class="tiles" id="t2">B</div>
    <div class="tiles" id="t3">C</div>
    <div class="tiles" id="t4">D</div>
    <div class="tiles" id="t5">E</div>
    <div class="tiles" id="t6">F</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

@mixin height($height: 1){
  height: 108px * $height;
}

@mixin width($width: 1){
  width: 100%/3 * $width;
}

@mixin position($left: 0, $top: 0){
  left: $left * 100%/3;
  top: $top * 108px;
}

html, body {
  padding: 0;
  margin: 0;
}

.tilesCollection {
  position: relative;
}
.tiles {
  position:absolute;
  display: block;
  outline: 1px solid #f0f;
}

#t1 {
  @include position(0,0);
  @include height(2);
  
  @include width(3);
}
#t2 {
  @include position(0,2);
  @include height(4);
  @include width(1);
}
#t3 {
  @include position(1,2);
  @include height(4);
  @include width(2);

}
#t4 {
  @include position(0,6);
  @include height(4);
  @include width(2);
}
#t5 {
  @include position(0,10);
  @include height(2);
  @include width(2);
}
#t6 {
  @include position(2,6);
  @include height(6);
  @include width(1);
}

SassMeister-output.css

html,body{padding:0;margin:0}.tilesCollection{position:relative}.tiles{position:absolute;display:block;outline:1px solid #f0f}#t1{left:0%;top:0px;height:216px;width:100%}#t2{left:0%;top:216px;height:432px;width:33.33333%}#t3{left:33.33333%;top:216px;height:432px;width:66.66667%}#t4{left:0%;top:648px;height:432px;width:66.66667%}#t5{left:0%;top:1080px;height:216px;width:66.66667%}#t6{left:66.66667%;top:648px;height:648px;width:33.33333%}

SassMeister-rendered.html

<div class="tilesCollection">
    <div class="tiles" id="t1">A</div>
    <div class="tiles" id="t2">B</div>
    <div class="tiles" id="t3">C</div>
    <div class="tiles" id="t4">D</div>
    <div class="tiles" id="t5">E</div>
    <div class="tiles" id="t6">F</div>
</div>