Padding Sass Mixin

The following are two (2) Sass mixins for the CSS padding property. The first mixin is for the padding shorthand property and the second mixin is for specifying individual sides.You can include both mixins in your project and use only one or both.

Padding – Shorthand property

For the padding shorthand property, the Sass mixin is:

// Padding shorthand version
@mixin padding($padding) {
  padding: $padding;

Usage example would be:

@include padding(top right bottom left);

Example of how you would add the mixin to your Sass project is:

@include padding(1px 2px 3px 4px);

In the above example, the CSS output would be:

padding: 1px 2px 3px 4px;

Padding – Individual sides

To specify individual sides, you would use the following mixin:

// Padding longhand version
@mixin padding-all($top, $right, $bottom, $left) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;

Usage example would be:

@include padding-all(top, right, bottom, left);

An example of how you would add the Sass mixin to your Sass project would be:

@include padding-all(1px, 2px, 3px, 4px);

In the example above, the CSS output would be:

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

If you don’t need a side or sides, simply use null as the value. Example:

@include padding-all(1px, 2px, null, 4px);

In the above example the bottom padding would not be outputted. So, the CSS output would look like this:

padding-top: 1px;
padding-right: 2px;
padding-left: 4px;