Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="block block-1-1">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-1-2">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-1-3">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-2-1">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-2-2">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-2-3">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-3-1">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-3-2">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-3-3">
  <img src="//placehold.it/50x50">
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$ns: block;
$block-size: 50px;
$gutter: 5px;

body {
  position: relative;
}

.block {
  width: $gutter * 2 + $block-size;
  position: absolute;
  padding: $gutter;
}

@for $x from 1 through 3 {
  
  @for $y from 1 through 3 {
    .#{$ns}-#{$x}-#{$y} {
    
      @if $y > 1 {
        left: ($gutter * 2 + $block-size) * ($y - 1);
      }
      @else {
        left: 0;
      }
      
      @if $x > 1 {
        top: ($gutter * 2 + $block-size) * ($x - 1);
      }
      @else {
        top: 0;
      }
    }
  }
}

SassMeister-output.css

body {
  position: relative;
}

.block {
  width: 60px;
  position: absolute;
  padding: 5px;
}

.block-1-1 {
  left: 0;
  top: 0;
}

.block-1-2 {
  left: 60px;
  top: 0;
}

.block-1-3 {
  left: 120px;
  top: 0;
}

.block-2-1 {
  left: 0;
  top: 60px;
}

.block-2-2 {
  left: 60px;
  top: 60px;
}

.block-2-3 {
  left: 120px;
  top: 60px;
}

.block-3-1 {
  left: 0;
  top: 120px;
}

.block-3-2 {
  left: 60px;
  top: 120px;
}

.block-3-3 {
  left: 120px;
  top: 120px;
}

SassMeister-rendered.html

<div class="block block-1-1">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-1-2">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-1-3">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-2-1">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-2-2">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-2-3">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-3-1">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-3-2">
  <img src="//placehold.it/50x50">
</div>
<div class="block block-3-3">
  <img src="//placehold.it/50x50">
</div>