PostCSS plugin for making calculations with math.js.
This plug-in supports:
- Plain-old maths, as per math.js built-in functionality
px
,em
,rem
,vh
,vmax
and other units- CSS-friendly rendering (
10cm
not10 cm
) - Unit stripping e.g.
strip(25px)
becomes25
- Unit math operations e.g.
floor(12.6px)
becomes12px
andceil(12.6px)
becomes13px
Contributions are very welcome!
.foo {
font-size: resolve(2 * 8px);
padding: resolve(strip(16cm) + (2px * 3));
margin: resolve(4px + resolve(2 * 3px));
}
.foo {
font-size: 16px;
padding: 22px;
margin: 10px;
}
postcss([ require('postcss-math') ])
See PostCSS docs for examples for your environment.
You can pass in a functionName
option to switch to something other than resolve
.
They're (deliberately) trying to work towards the calc(...) standard, so for instance it doesn't support things like exponentials at the moment. This wraps up math.js so you have a wider range of things you can do.