margin

view source

A slight but useful variation on vanilla CSS's margin shorthand, to ease development.

use-name

scut-margin

type

mixin only

arguments

$margin
A list (1 to 4 values) will set margin rules on multiple sides. n abbreviates null and creates no rule.

Pass a list (1 to 4 values, not comma-separated) and scut-margin will

create all margins as separate rules (that is, it will not use the shorthand, but will instead create margin-top, margin-right, etc.); and
allow you to pass n to avoid creating a rule on any side. (As elsewhere in Scut, n stands for null and results in no rule being created.)

By using the mixin in this way, you will avoid some troubles that can occur, especially when changing margins on an element (in a media query, for instance; or overriding a cascaded style). The point is to make it easier to override the values you want to override without affecting those you want to leave alone.

If you like this one, you will like scut-padding.

example

SCSS

.eg-margin-1 {
  @include scut-margin(1em n);
}
.eg-margin-2 {
  @include scut-margin(0.5em 3em);
}
.eg-margin-3 {
  @include scut-margin(3em 1em n);
}

compiled CSS

.eg-margin-1 {
  margin-top: 1em;
  margin-bottom: 1em;
}

.eg-margin-2 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 3em;
  margin-right: 3em;
}

.eg-margin-3 {
  margin-top: 3em;
  margin-right: 1em;
  margin-left: 1em;
}

Result

Variation 1

Variation 2

Variation 3