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
