Margin Sass Mixin

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

Learn | Sass

Margin Sass Mixin

The following are two (2) Sass mixins for the CSS margin property. The first mixin is for the margin 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.

Margin – Shorthand property

For the margin shorthand property, the Sass mixin is:

// Margin shorthand version
@mixin margin($margin) {
  margin: $margin;

Usage example:

@include margin(top right bottom left);

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

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

In the above example, the CSS output would be:

margin: 1px 2px 3px 4px;

Margin – Individual sides

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

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

Usage example would be:

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

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

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

In the example above, the CSS output would be:

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

If you don’t need a side, simply use null instead. Example:

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

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

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