Margin Stylus Mixin

Two (2) Stylus mixins for the CSS margin property.

Learn | Stylus

Margin Stylus Mixin

The following are two (2) Stylus mixins for the CSS margin property. One of the mixins is a shorthand version and the other is a longhand version. You can use one (1) or both of the mixins in your code.

Shorthand Margin Stylus Mixin

The first is a shorthand Stylus mixin:

/* Margin shorthand version */
  margin n

How you would use the Stylus mixin would be:


Where px is the size.

Here is an example of the mixin:


Or define all margin sizes:

margin(50px 25px 15px 5px)

Longhand Margin Stylus Mixin

The next Stylus mixin allows you to set individual sides:

/* Margin longhand version */
margin-all(top, right, bottom, left)
  margin-top: top
  margin-right: right
  margin-bottom: bottom
  margin-left: left

Usage of this Stylus mixin is:

margin-all(top, right, bottom, left)

Example of the mixin in use:

margin-all(1px, 2px, 3px, 4px)