gulp-ipx2rem

    1.0.2 • Public • Published

    gulp-ipxrem

    只是修改了gulp-pxrem生成的名字 NPM version Build status Downloads

    Usage

    The raw stylesheet only contains @2x style, and if you

    • don't intend to transform the original value, eg: 1px border, add /*no*/ after the declaration
    • intend to use px by force,eg: font-size, add /*px*/ after the declaration

    Attention: Dealing with SASS or LESS, only /*...*/ comment can be used, in order to have the comments persisted

    Gulpfile.js:

    var gulp = require('gulp');
    var px2rem = require('gulp-pxrem');
    
    gulp.task('px2rem', function() {
      gulp.src('./*.css')
        .pipe(px2rem())
        .pipe(gulp.dest('./dest'))
    });
    

    Options

    px2rem({
      baseDpr: 2,             // base device pixel ratio (default: 2)
      threeVersion: false,    // whether to generate @1x, @2x and @3x version (default: false)
      remVersion: true,       // whether to generate rem version (default: true)
      remUnit: 75,            // rem unit value (default: 75)
      remPrecision: 6         // rem precision (default: 6)
    })
    

    Example

    Pre processing:

    One raw stylesheet: test.css

    .selector {
      width: 150px;
      height: 64px; /*px*/
      font-size: 28px; /*px*/
      border: 1px solid #ddd; /*no*/
    }
    

    After processing:

    Rem version: test.css

    .selector {
      width: 2rem;
      border: 1px solid #ddd;
    }
    [data-dpr="1"] .selector {
      height: 32px;
      font-size: 14px;
    }
    [data-dpr="2"] .selector {
      height: 64px;
      font-size: 28px;
    }
    [data-dpr="3"] .selector {
      height: 96px;
      font-size: 42px;
    }
    

    @1x version: test1x.debug.css

    .selector {
      width: 75px;
      height: 32px;
      font-size: 14px;
      border: 1px solid #ddd;
    }
    

    @2x version: test2x.debug.css

    .selector {
      width: 150px;
      height: 64px;
      font-size: 28px;
      border: 1px solid #ddd;
    }
    

    @3x version: test3x.debug.css

    .selector {
      width: 225px;
      height: 96px;
      font-size: 42px;
      border: 1px solid #ddd;
    }
    

    CLI tool provided in px2rem

    License

    MIT

    Keywords

    Install

    npm i gulp-ipx2rem

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    50.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • w530385371