padding

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

• create all paddings as separate rules (that is, it will not use the shorthand, but will instead create padding-top, padding-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 when changing paddings 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-margin.

example

.eg-padding {
  display: inline-block;
}
.eg-padding-1 {
  @include scut-padding(1em n);
}
.eg-padding-2 {
  @include scut-padding(0.5em 3em);
}
.eg-padding-3 {
  @include scut-padding(n 8em 3em n);
}

.eg-padding {
  display: inline-block;
}

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

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

.eg-padding-3 {
  padding-right: 8em;
  padding-bottom: 3em;
}

Result