Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.editorconfig
.eslintrc.json
.gitignore
.travis.yml
LICENSE
README.md
index.js
package-lock.json
package.json
test.js

README.md

postcss-units

Dependency Status Build Status

PostCSS plugin which generates rem or em when required

Usage

Conversion from pixels into em or rem, depending on wrapper of value.

// input
.title {
    margin: rem(-10px 8px);
    padding: 15px;
    font-size: rem(14px);
    line-height: rem(20);
}

// output
.title {
    margin: -0.625rem 0.5rem;
    padding: 15px;
    font-size: 0.88rem;
    line-height: 1.25rem;
}
postcss([
    require('postcss-units')({
        size: 14,
        fallback: false,
        precision: 2
    })
])

options

size

Type: Number
Default: 16

The body font size.

fallback

Type: Boolean
Default: false

Perform fallback rem for old browsers.

precision

Type: Number
Default: 3

Quantity of digits after decimal point for em and rem.

Use with gulp-postcss

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcssUnits = require('postcss-units');

gulp.task('css', function () {

    var processors = [
        postcssUnits({
            size: 14
        })
    ];
    return gulp.src(['build/static/css/**/*.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/static/css'));
});

License

MIT © Maxim Gladkih

You can’t perform that action at this time.