postcss-define-function
postcss-define-function copied to clipboard
PostCSS plugin for Sass-like function directive
PostCSS define-function 
PostCSS plugin to implement sass @function.
@define-function rem($val) {
@return $val / 640 * 10 * 1rem;
}
@callFn .foo {
/* Input example */
height: rem(640);
}
.foo {
/* Output example */
height: 10rem}
It only supports the basic four mixed operations: +
、-
、*
、/
. If you want to be able to use more advanced features, you can use mixins instead or help me to improve it.
Looking forward to your issues and pull requests
Usage
postcss([ require('postcss-define-function') ])
See PostCSS docs for examples for your environment.
Options
Call plugin function to set options:
postcss([ require('postcss-define-function')({ silent: true }) ])
silent
Remove unknown callFns and do not throw a error. Default is false
.
Test
// basic feature test
npm test
// preview visual test results
npm run testCase