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

Thanks

• postcss
• postcss-plugin-boilerplate
• postcss-mixins