PostCSS Proportional Spacing

Create vertical and horizontal proportional spacing using ratios.

.example {
  padding: 80px 0.5;
  margin-right: 80px;
  margin-bottom: 2;
}

Outputs:

.example {
  padding: 80px 40px;
  margin-right: 80px;
  margin-bottom: 160px;
}

When a ratio is used the value is calculated by multiplying against the adjacent sides. The respective top and right sides are checked first, and if no value is set then the respective bottom and left sides are checked.

Please let me know if you think this is not useful or if you have another suggestion as there may be a better way to manage the logic behind this that I haven't thought of.

Using with variables

You may consider using it with sass variables or custom values.

SASS Variables

https://github.com/jonathantneal/postcss-advanced-variables

$ratio-octave: 0.5;

.button {
  padding: 40px $ratio-octave;
}

Custom Values

https://github.com/mindthetic/postcss-custom-values

@value OCTAVE property(padding) {
  value: 1.5;
}

.button {
  padding: 40px OCTAVE;
}

Setup

Add to your project:

npm install postcss-proportional-spacing --save-dev