view source

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

mixin only
  1. $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.



.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);


Variation 1
Variation 2
Variation 3