gulp-px2rem-converter

    1.5.9 • Public • Published

    gulp converter pixel to rem

    Build Status

    Convert all px to rem

    install

    npm i -D gulp-px2rem-converter
    

    use

    const gulp = require('gulp');
    const pxToRem = require('gulp-px2rem-converter')
    
    function css(){
        return gulp.src('./*.css')
        .pipe(pxToRem())
        .pipe(gulp.dest('./dist'))
    }
    
    module.exports.css = css;
    

    If you are not using :root or html or they do not have a font-size then you can ignore it. The default value 16px will be taken or you can specify this value manually

    pxToRem(16)
    

    or

    pxToRem('16px')
    

    or

    pxToRem('100%')
    

    run

    gulp css
    

    example

    input

    html{
        font-size: 62.5%;
    }
    div{
        padding: 160px;
        border:1px solid red;
    }
    @media (min-width:120px){
        div{
            padding: 120px;
        }
    }
    

    output

    html{
        font-size: 62.5%;
    }
    div{
        padding: 16rem;
        border:0.1rem solid red;
    }
    @media (min-width:12em){
        div{
            padding: 12rem;
        }
    }
    

    example use :root

    input

    
    :root{
        font-size: 20px;
    }
    html{
        font-size: 20px;
    }
    div{
        padding: 40px;
    }
    @media(min-width:1200px){
        div{
            padding: 60px;
        }
    }
    

    output

    :root{
        font-size: 20px;
    }
    html{
        font-size: 1rem;
    }
    div{
        padding: 2rem;
    }
    @media(min-width:60em){
        div{
            padding: 3rem;
        }
    }
    

    info

    The plugin works with units such as % or px. If you are using other devices, do not use this plugin. Unable to compute units that are dynamic by the browser.

    Also converts all @media to em where px was used. Using em will resize all dimensions to those specified by the user. rem is not used due to bugs in Safari browsers

    The plugin is not case sensitive. You can enter both px and PX or Px

    Doesn't work if you use font-size in :root or html in @ media. By default will take only the first font-size in :root or html if there is no font-size value in :root

    compatibility

    css less(http://lesscss.org/) scss

    Install

    npm i gulp-px2rem-converter

    DownloadsWeekly Downloads

    9

    Version

    1.5.9

    License

    MIT

    Unpacked Size

    513 kB

    Total Files

    46

    Last publish

    Collaborators

    • dasx10