postcss-modularscale v3.0.2

PostCSS Modular Scale

This is a fork of Kristofer Joseph's postcss-modular-scale using the maintained modularscale-js(modularscale-js library).

Install

npm install postcss-modularscale

Usage

To generate relative values use target / base font size

Example:

1 = 16px ( target ) / 16px ( base font size )
0.75 = 12px ( target ) / 16px ( base font size )
Generates `em` or `rem` relative values

Input

:root {
  --ms-bases: 1, 0.75;
  --ms-ratios: 2;
}

.header {
  font-size: ms(4)rem;
}

Output

:root {
  --ms-bases: 1, 0.75;
  --ms-ratios: 2;
}

.header {
  font-size: 3rem;
}

Mad props

Thanks to Kristopher Joseph for the original postcss-modular-scale. His credits follow:

Tons of thanks to Scott Kellum @scottkellum & Tim Brown @nicewebtype for making Modular Scale and the libraries that make this plugin possible.