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

Readme

Keywords

Package Sidebar

Install

npm i gulp-ipx2rem

Weekly Downloads

0

Version

1.0.2

License

ISC

Unpacked Size

50.5 kB

Total Files

10

Last publish

Collaborators

  • w530385371