PostCSS Math Plugin
Support advanced math via mathjs
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!
Example usage
Input:
.foo {
/* Basic usage */
font-size: resolve(2 * 8px);
/* nested */
margin: resolve(4px + resolve(2 * 3px));
/* with postcss simple variables. $navHeight = 80px */
height: resolve($navHeight - 20px);
/* strip values */
padding: resolve(strip(16cm) * (2px + 3))px;
}
Output:
.foo {
font-size: 16px;
padding: 22px;
margin: 10px;
height: 60px;
}
Multiline:
p {
font-size: resolve(
1 +
2 +
3
)px;
}
Output:
p {
font-size: 6px;
}
Usage
postcss([ require('postcss-math') ])
See [PostCSS] docs for examples for your environment.
postcss-calc
or CSS calc()
?
How does this differ to 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.
Prior art
Updated fork of https://github.com/shauns/postcss-math