postcss-px-scaler

px值放大/缩小n倍

Installation

npm install postcss-px-scaler

Example

const postcss = require('postcss')
const pxScale = require('postcss-px-scaler')
const input = fs.readFileSync("input.css", "utf8")
const output = postcss().use(pxScale({ scale: 2 })).process(input).css

before:

.element {
  font-size: 16px;
  width: 100px;
  border: 1px solid #ccc; /*no*/
}

after:

.element {
  font-size: 32px;
  width: 200px;
  border: 1px solid #ccc; /*no*/
}

API

pxScale({
  scale: 2,
  includes: 'bxs-ui-vue'
})

• scale: 放大/缩小倍数，默认值 1，类型 Number
• units: 匹配需要放大/缩小的单位，默认值 px，类型 String
• includes: 仅处理匹配到includes中的文件，默认值 空，类型 String|Array
• excludes: 不处理匹配到excludes中的文件，默认值 空，类型 String|Array
• excludeProps: 不处理匹配到的属性，默认值 []，类型 Array
• excludeMinUnit: 不处理匹配小于此单位的属性，默认值处理所有，类型 Number

Node

const postcss = require('postcss')
const pxScale = require('postcss-px-scaler')
const input = 'body { font-size: 16px }';
const output = postcss().use(pxScale({ scale: 2 })).process(input).css

Gulp

const gulp = require('gulp')
const postcss = require('gulp-postcss')
const pxScale = require('postcss-px-scaler')
gulp.task('default', function () {
  var processors = [pxScale({ scale: 2 })]
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'))
});

Webpack

const pxScale = require('postcss-px-scaler')
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function () {
    return [pxScale({ scale: 2 })]
  }
}