1. 在codepen中使用：

• CSS選項(xiàng)中選擇PostCss；
• 編寫(xiě)：

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

使用未來(lái)語(yǔ)法：

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

2. 在gulp中使用：

• 創(chuàng)建項(xiàng)目
  • 創(chuàng)建項(xiàng)目文件夾，創(chuàng)建src和dist文件夾；
  • 項(xiàng)目中添加gulpfile.js文件；
  • 打開(kāi)終端，執(zhí)行npm init命令，生成package.json文件；
• 安裝gulp和postcss以及插件：
  • 打開(kāi)終端，執(zhí)行npm i gulp gulp-postcss -D；
  • 安裝完成后，繼續(xù)執(zhí)行npm i autoprefixer cssnext precss -S；
• 配置gulpfile.js

var gulp = require('gulp');         // 引入依賴(lài)
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];  // 想要使用插件，需要將其寫(xiě)到數(shù)組中，需要傳參就用括號(hào)寫(xiě)入；
 return gulp.src('src/*.css')
            .pipe(postcss(processors))  // gulp配置postcss
            .pipe(gulp.dest('dist/'));
});

• 配置測(cè)試文件style.css：

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

• 打開(kāi)終端，執(zhí)行gulp css：
  
• 得到結(jié)果如下：

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

關(guān)于browsers: browserlist

3. 插件管理：

• 官網(wǎng)插件地址
• @postcss Twitter

參考: 大漠postcss