Automatically evaluate mathematical expressions in your CSS source files, like in SASS or LESS. No special function calls needed as with `postcss-mathjs`.
npm install postcss-automath[PostCSS]: https://github.com/postcss/postcss
[PostCSS] plugin for evaluating math expressions in your CSS sources.
This plug-in uses the LESS parser internally, in an
(intentionally) very limited way- just to parse mathematical expressions.
As such, all unit handling mechanics are the same as in LESS.
If you want full LESS parsing functionality in your project, see
postcss-less-engine.
``scss`
.foo {
font-size: 2 * 8px;
margin: 4px + 2 * 3px;
}
`css`
.foo {
font-size: 16px;
margin: 10px;
}
`js`
postcss([ require('postcss-automath') ])
For best results, add the plugin after any variable parsing, mixin processing or
function handling plugins. Since postcss-automath works on the final numeric
values of your CSS you need to process all variables, mixins and other dynamic
data beforehand.
See [PostCSS] docs for examples for your environment.
?They're (deliberately) trying to work towards the calc(...) standard, so for
instance it doesn't support things like exponentials at the moment.
& postcss-mathjs?Those plugins want you to add non-standard function wrappers (the resolve()`
function) around each expression you want evaluated. This module allows you
to write normal math expressions you'd be used to from using SASS, SCSS or LESS.
Since the variable handling is deferred to another plugin, you are free to use
this module with SCSS, LESS, W3C or even your own custom syntax.