Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>This is text</p>
<p class="mt-small">This is text</p>
<p class="mt-medium">This is text</p>
<p class="mt-large">This is text</p>
<p class="mt-xlarge">This is text</p>

<hr />

<p class="mb-small">This is text</p>
<p class="mb-medium">This is text</p>
<p class="mb-large">This is text</p>
<p class="mb-xlarge">This is text</p>
<p>This is text</p>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

p {
    margin: 0;
    padding: 0;
}

$margins: (
    small: 10px,
    medium: 15px,
    large: 20px,
    xlarge: 30px
);

@each $label, $margin in $margins {
    .mt-#{$label} {
        margin-top: #{$margin};
    }
    .mb-#{$label} {
        margin-bottom: #{$margin};
    }
}

SassMeister-output.css

p {
  margin: 0;
  padding: 0;
}

.mt-small {
  margin-top: 10px;
}

.mb-small {
  margin-bottom: 10px;
}

.mt-medium {
  margin-top: 15px;
}

.mb-medium {
  margin-bottom: 15px;
}

.mt-large {
  margin-top: 20px;
}

.mb-large {
  margin-bottom: 20px;
}

.mt-xlarge {
  margin-top: 30px;
}

.mb-xlarge {
  margin-bottom: 30px;
}

SassMeister-rendered.html

<p>This is text</p>
<p class="mt-small">This is text</p>
<p class="mt-medium">This is text</p>
<p class="mt-large">This is text</p>
<p class="mt-xlarge">This is text</p>

<hr />

<p class="mb-small">This is text</p>
<p class="mb-medium">This is text</p>
<p class="mb-large">This is text</p>
<p class="mb-xlarge">This is text</p>
<p>This is text</p>