@nikonee/postcss-pxtorem

postcss-pxtorem

一个将 px 像素单位转换为 rem 单位的 PostCSS 插件。

安装

$ npm install postcss postcss-pxtorem --save-dev

$ yarn add postcss postcss-pxtorem --save-dev

使用

像素是最常用的 CSS 单位，通常不允许更改浏览器默认字体大小 16。 而该插件可以将你所选中属性的 px 值转换为 rem 值，这样以来就可以通过浏览器设置字体大小。

输入/输出

使用默认配置时，只有与字体相关的属性会受影响。

// 输入
h1 {
  margin: 0 0 20px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 1px;
}

// 输出
h1 {
  margin: 0 0 20px;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.0625rem;
}

示例

var fs = require("fs");
var postcss = require("postcss");
var pxtorem = require("postcss-pxtorem");
var css = fs.readFileSync("main.css", "utf8");
var options = {
  replace: false
};
var processedCss = postcss(pxtorem(options)).process(css).css;

fs.writeFile("main-rem.css", processedCss, function(err) {
  if (err) {
    throw err;
  }
  console.log("Rem file written.");
});

配置

Type: Object | Null
Default:

{
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0,
    exclude: /node_modules/i
}

• rootValue (Number | Function) Represents the root element font size or returns the root element font size based on the input parameter
• unitPrecision (Number) The decimal numbers to allow the REM units to grow to.
• propList (Array) The properties that can change from px to rem.
  • Values need to be exact matches.
  • Use wildcard * to enable all properties. Example: ['*']
  • Use * at the start or end of a word. (['*position*'] will match background-position-y)
  • Use ! to not match a property. Example: ['*', '!letter-spacing']
  • Combine the "not" prefix with the other prefixes. Example: ['*', '!font*']
• selectorBlackList (Array) The selectors to ignore and leave as px.
  • If value is string, it checks to see if selector contains the string.
    • ['body'] will match .body-class
  • If value is regexp, it checks to see if the selector matches the regexp.
    • [/^body$/] will match body but not .body
• replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
• mediaQuery (Boolean) Allow px to be converted in media queries.
• minPixelValue (Number) Set the minimum pixel value to replace.
• exclude (String, Regexp, Function) The file path to ignore and leave as px.
  • If value is string, it checks to see if file path contains the string.
    • 'exclude' will match \project\postcss-pxtorem\exclude\path
  • If value is regexp, it checks to see if file path matches the regexp.
    • /exclude/i will match \project\postcss-pxtorem\exclude\path
  • If value is function, you can use exclude function to return a true and the file will be ignored.
    • the callback will pass the file path as a parameter, it should returns a Boolean result.
    • function (file) { return file.indexOf('exclude') !== -1; }

结合 gulp 使用

var gulp = require("gulp");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var pxtorem = require("postcss-pxtorem");

gulp.task("css", function() {
  var processors = [
    autoprefixer({
      browsers: "last 1 version"
    }),
    pxtorem({
      replace: false
    })
  ];

  return gulp
    .src(["build/css/**/*.css"])
    .pipe(postcss(processors))
    .pipe(gulp.dest("build/css"));
});

忽略属性

目前，忽略单个属性最简单的方式就是使用大写 PX 单位，但如果你使用了格式化插件，这种方式会有问题。

// `px` is converted to `rem`
.convert {
  font-size: 16px; // converted to 1rem
}

// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers
.ignore {
  border: 1px solid; // ignored
  border-width: 2px; // ignored
}