postcss-px-scale

postcss-px-scale

px值放大/缩小n倍

注意：该插件依赖postcss.process(css, { from: file }) 或者使用postcss-loader自动注入file信息，请把该插件放置在px2rem类型的插件前执行

Installation

npm install postcss-px-scale

Example

const postcss = require('postcss')
const pxScale = require('postcss-px-scale')
const input = fs.readFileSync("input.css", "utf8")
const output = postcss().use(pxScale({
  scale: 2,
  ignoreValue: 1 // 或者ignoreValue: [1]
})).process(input).css

before:

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

after:

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

API

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

• scale: 放大/缩小倍数，默认值 1，类型 Number
• units: 匹配需要放大/缩小的单位，默认值 px，类型 String
• ignoreValue: 需要忽略的数值，如1px，则配置ignoreValue: 1或ignoreValue: [1]，类型 String|Array
• includes: 仅处理匹配到includes中的文件，默认值 空，类型 String|Array
• excludes: 不处理匹配到excludes中的文件，默认值 空，类型 String|Array

Node

const postcss = require('postcss')
const pxScale = require('postcss-px-scale')
const input = 'body { font-size: 16px }';
const output = postcss().use(pxScale({
  scale: 2,
  ignoreValue: [1, 2] // 忽略数值为1和2的数值缩放
})).process(input).css

Gulp

const gulp = require('gulp')
const postcss = require('gulp-postcss')
const pxScale = require('postcss-px-scale')
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-scale')
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function () {
    return [pxScale({ scale: 2 })]
  }
}