Stylus Mixin Library

Stylus Mixin Library is a simple, lightweight, yet powerful mixin library for Stylus.


Copy the mixins folder to your project directory and then add the following line of code to your project’s main file:

@import 'mixins/*'


Each mixin file located in the mixins directory contains documentation on how to include the mixin.

Example of implementation can also be found in test.styl.

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)