# px2rpx According to one stylesheet, generate rpx version and @1x, @2x and @3x stylesheet. [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [npm-image]: https://img.shields.io/npm/v/px2rpx.svg?style=flat-square [npm-url]: https://npmjs.org/package/px2rpx [downloads-image]: http://img.shields.io/npm/dm/px2rpx.svg?style=flat-square [downloads-url]: https://npmjs.org/package/px2rpx This set of tools contains: * a CLI tool * [webpack loader](https://www.npmjs.com/package/px2rpx-loader) ## 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** ### CLI tool ``` $ npm install -g px2rpx ``` ``` $ px2rpx -o build src/*.wxss ``` ``` Usage: px2rpx [options] Options: -h, --help output usage information -V, --version output the version number -u, --rpxUnit [value] set `rpx` unit value (default: 75) -x, --threeVersion [value] whether to generate @1x, @2x and @3x version stylesheet (default: false) -r, --rpxVersion [value] whether to generate rpx version stylesheet (default: true) -b, --baseDpr [value] set base device pixel ratio (default: 2) -p, --rpxPrecision [value] set rpx value precision (default: 6) -o, --output [path] the output file dirname ``` ### API ``` var Px2rpx = require('px2rpx'); var px2rpxIns = new Px2rpx([config]); var originCssText = '...'; var dpr = 2; var newCssText = px2rpxIns.generaterpx(originCssText); // generate rpx version stylesheet var newCssText = px2rpxIns.generateThree(originCssText, dpr); // generate @1x, @2x and @3x version stylesheet ``` ## License MIT