mc

math-calc

math-calc is a simpleset and fast postcss plugin allows you write +、-、*、/、% in your css

Showing:

Popularity

Downloads/wk

8

GitHub Stars

3

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

2

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

math-calc

math-calc is a simpleset and fast postcss plugin allows you write + - * / in your css

Usage

Gulp

var gulp = require('gulp');
var postcss = require('postcss');
var calc = require('math-calc');

gulp.task('css', function() {
  var processors = [calc];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

Input

#demo {
    width: 100px+100px;
    width: 100px + 100px;
    width: 100px   +        100px;

    height: 100px - 100.0px;
    height: 100px - 50;
    height: -10px - -50;
    height: -10px - -50px;

    border: 1 * 2px solid #fafafa;
    border: 1px * 2px solid #fafafa;

    margin: 1/1px 2.1 / 10px 10px / -2 1px     /2px;

    background: 100% / 2;
}

Output

#demo {
    width: 200px;
    width: 200px;
    width: 200px;

    height: 0px;
    height: 50px;
    height: 40px;
    height: 40px;

    border: 2px solid #fafafa;
    border: 2px solid #fafafa;

    margin: 1px 0.21px -5px 0.5px;

    background: 50%;
}

TIPS

Please use this plugin after variable plugin

LICENSE

MIT.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial