English | 简体中文
postcss-px2units
A plugin for PostCSS that generates rpx units from pixel units, it also can generate units which you want.
Install
$ npm install postcss-px2units --save-dev
Usage
Input/Output
With the default settings, we will get this output.
/* input */ /* output */
Example
var fs = ;var postcss = ;var pxtorem = ;var css = fs;var options = replace: false;var processedCss = css; fs;
options
Type: Object | Null
Default:
divisor: 1 multiple: 1 decimalPlaces: 2 comment: 'no' targetUnits: 'rpx'
Detail:
- divisor(Number): divisor, replace pixel value with pixel / divisor.
- multiple(Number): multiple, replace pixel value with pixel * multiple.
- decimalPlaces(Number): the number of decimal places. For example, the css code is
width: 100px
, we will get the vaule isNumber(100 / divisor * multiple).toFixed(decimalPlaces)
. - comment(String): default value is 'no'. For example, if you set it 'not replace', the css code
width: 100px; /* not replace */
will be translated towidth: 100px;
- targetUnits(String): The units will replace pixel units, you can set it 'rem'.
Use with gulp-postcss
var gulp = ;var postcss = ;var pxtounits = ; gulp;
Tips
If you want to use it in WePY, please use wepy-plugin-px2units.