Padding Stylus Mixin

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

Learn | Stylus

Padding Stylus Mixin

The following are two (2) Stylus mixins for the CSS padding 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 Padding Stylus Mixin

The first is a shorthand Stylus mixin:

/* Padding shorthand version */
  padding n

How you would use the Stylus mixin would be:


Where px is the size.

Here is an example of the mixin:


Or define the padding size for all sides:

padding(50px 25px 15px 5px)

Longhand Padding Stylus Mixin

The next Stylus mixin allows you to set individual sides:

/* Padding longhand version */
padding-all(top, right, bottom, left)
  padding-top: top
  padding-right: right
  padding-bottom: bottom
  padding-left: left

Usage of this Stylus mixin is:

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

Example of the mixin in use:

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