# PostCSS

postcss

特性
安装
使用
插件
资料

# 特性

增强代码的可读性
将未来的 CSS 特性带到今天！
终结全局 CSS
避免 CSS 代码中的错误
强大的网格系统

# 安装

直接在package.json中直接添加一个postcss选项参数,
也可以项目根目录单独创建.postcssrc或者.postcssrc.js或者postcss.config.js文件，里面使用common.js模块化语法暴露一个配置项对象。

# 使用

每一个插件都可以细化的配置，具体的配置方案可以视项目场景而定。

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 32,
      propList: ['*'],
      // 注意：如果有使用第三方UI如cube-ui，则需要配置下忽略选择器不转换。
      // 规则是class中包含的字符串，如cube-ui中所有的class前缀都是cube-。也可以是正则。
      selectorBlackList: ['cube-']
    },
    'postcss-import': {},
    'postcss-url': {},
    autoprefixer: {} // 自动修复浏览器前缀
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 插件

插件列表 | PostCSS.parts

常用插件：

cssnext：CSS 未来语法
Autoprefixer：自动补全浏览器私有前缀
precss：CSS 预处理（整合 Sass、LESS 或 Stylus 功能，语法基本和 Sass 的相同）
postcss-import：通过@import，整合多个 CSS 文件
css-mqpacker：将相同的 CSS 媒体查询规则合并为一个
cssnano：压缩 CSS 文件
postcss-color-rgba-fallback：给 rgba 颜色创建降级方案(添加备用颜色)
postcss-opacity：给 opacity 提供降级方案（给 IE 浏览器添加滤镜属性）
postcss-pxtorem：px 与 rem 单位自动换算
postcss-pseudoelements：将伪元素的::转换为:(IE8 不支持:😃

# 资料

← VSCode Stylelint →