A sass mixin to create a bunch of margin and padding classes

<!doctype html>
<html>
	<head>
		<title>Mixin Snippets</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body
	  style="background: url('http://jerrythimothy.bigjapps.com/margins-paddings-sass-mixin/bg.png')">
		<div
		  class="p-l-50"
		  style="border: 3px solid red;">
		  <img
		      src="http://jerrythimothy.bigjapps.com/margins-paddings-sass-mixin/bulbasaur.png" 
		      style="width: 100px;" 
		  />
		</div>
		<br />
		<div
		  class="m-l-50"
		  style="border: 3px solid blue;">
		  <img
		      src="http://jerrythimothy.bigjapps.com/margins-paddings-sass-mixin/charmander.png" 
		      style="width: 100px;" 
		  />
		</div>
		<br />
		<div
		  class="p-r-30"
		  style="border: 3px solid green; text-align: right;">
		  <img
		      src="http://jerrythimothy.bigjapps.com/margins-paddings-sass-mixin/squirtle.png" 
		      style="width: 100px;" 
		  />
		</div>
		<br />
		<div
		  class="m-t-50"
		  style="border: 3px solid black; text-align: center;">
		  <img
		      src="http://jerrythimothy.bigjapps.com/margins-paddings-sass-mixin/pikachu.png" 
		      style="width: 100px;" 
		  />
		</div>
	</body>
</html>

$max: 50;
$offset: 5;
$unit: 'px'; // Feel free to change the unit.

@mixin list-loop($className, $styleName) {
  $i: 0;
  @while $i <= $max {
    #{$className + $i} { 
      #{$styleName}: #{$i + $unit};
    }
    $i: $i + $offset;
  }
}

// Margins
@include list-loop('.m-t-', 'margin-top');
@include list-loop('.m-r-', 'margin-right');
@include list-loop('.m-b-', 'margin-bottom');
@include list-loop('.m-l-', 'margin-left');
@include list-loop('.m-x-', 'margin');

// Paddings
@include list-loop('.p-t-', 'padding-top');
@include list-loop('.p-r-', 'padding-right');
@include list-loop('.p-b-', 'padding-bottom');
@include list-loop('.p-l-', 'padding-left');
@include list-loop('.p-x-', 'padding');