PostCSS 作用

问题

PostCSS 的作用是什么？它和 Sass/Less 有什么区别？

解答

PostCSS 是一个用 JavaScript 转换 CSS 的工具。它本身不做任何转换，而是通过插件系统来实现各种功能。

常见用途

1. 自动添加浏览器前缀（Autoprefixer）

/* 输入 */
.box {
  display: flex;
  user-select: none;
}

/* 输出 */
.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

2. 使用未来 CSS 语法（postcss-preset-env）

/* 输入：使用 CSS 嵌套（原生语法） */
.card {
  background: #fff;
  
  & .title {
    font-size: 18px;
  }
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 输出：兼容当前浏览器 */
.card {
  background: #fff;
}
.card .title {
  font-size: 18px;
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

3. CSS 压缩（cssnano）

/* 输入 */
.box {
  margin: 10px 20px 10px 20px;
  color: #ff0000;
  font-weight: normal;
}

/* 输出 */
.box{margin:10px 20px;color:red;font-weight:400}

配置示例

// postcss.config.js
module.exports = {
  plugins: [
    // 使用未来 CSS 特性
    require('postcss-preset-env')({
      stage: 2,
      features: {
        'nesting-rules': true
      }
    }),
    // 自动添加前缀
    require('autoprefixer'),
    // 生产环境压缩
    process.env.NODE_ENV === 'production' && require('cssnano')
  ].filter(Boolean)
}

与 Sass/Less 的区别

特性	PostCSS	Sass/Less
本质	插件平台	预处理器
语法	标准 CSS + 插件扩展	自定义语法
功能	按需选择插件	内置固定功能
扩展性	可编写 JS 插件	有限

两者可以配合使用：Sass 编译后再用 PostCSS 处理。

// webpack 配置示例
module.exports = {
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',  // PostCSS 处理
        'sass-loader'      // 先用 Sass 编译
      ]
    }]
  }
}

关键点

• PostCSS 是插件平台，本身不做转换，功能由插件提供
• Autoprefixer 自动添加浏览器前缀，是最常用的插件
• postcss-preset-env 让你使用未来的 CSS 语法
• cssnano 用于生产环境的 CSS 压缩
• 可以和 Sass/Less 配合使用，互不冲突