ce4c83ff
wxy
初始提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
# 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] <file...>
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
|