PostCss

1. 在codepen中使用：

• CSS选项中选择PostCss；
• 编写：

@use postcss-cssnext;  /* 引入插件 */
:root {                              /* 添加变量 */
  --body_bg_color: red;
}
body {
  background: var(--body_bg_color); /* 声明变量 */
}

使用未来语法：

--body_bg_color: color(red lightness(20%));

2. 在gulp中使用：

• 创建项目
  • 创建项目文件夹，创建src和dist文件夹；
  • 项目中添加gulpfile.js文件；
  • 打开终端，执行npm init命令，生成package.json文件；
• 安装gulp和postcss以及插件：
  • 打开终端，执行npm i gulp gulp-postcss -D；
  • 安装完成后，继续执行npm i autoprefixer cssnext precss -S；
• 配置gulpfile.js

var gulp = require('gulp');         // 引入依赖
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
gulp.task('css', function() {
 var processors = [autoprefixer({browsers: ['last 5 versions']}), cssnext, precss];  // 想要使用插件，需要将其写到数组中，需要传参就用括号写入；
 return gulp.src('src/*.css')
            .pipe(postcss(processors))  // gulp配置postcss
            .pipe(gulp.dest('dist/'));
});

• 配置测试文件style.css：

/* 测试autoprefixer */
.autoprefixer {
  display: flex;
}
/* 测试cssnext */
.cssnext {
  color: color(red lightness(20%));
  background-color: color(red alpha(-10%));
}
/* 测试precss */
.precss {
  @if 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}

• 打开终端，执行gulp css：
  
• 得到结果如下：

/* 测试autoprefixer */
.autoprefixer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* 测试cssnext */
.cssnext {
  color: rgb(102, 0, 0);
  background-color: rgba(255, 0, 0, 0.9);
}
/* 测试precss */
.precss {
  background: green;
}

关于browsers: browserlist

3. 插件管理：

• 官网插件地址
• @postcss Twitter

参考: 大漠postcss