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中使用：
- 創(chuàng)建項目
- 創(chuàng)建項目文件夾肿孵，創(chuàng)建src和dist文件夾；
- 項目中添加gulpfile.js文件灾茁；
- 打開終端牧抽，執(zhí)行
npm init命令，生成package.json文件夏块；
- 安裝gulp和postcss以及插件：
- 打開終端疏咐，執(zhí)行
npm i gulp gulp-postcss -D纤掸； - 安裝完成后，繼續(xù)執(zhí)行
npm i autoprefixer cssnext precss -S浑塞；
- 打開終端疏咐，執(zhí)行
- 配置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]; // 想要使用插件借跪，需要將其寫到數(shù)組中，需要傳參就用括號寫入酌壕；
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;
}
}
- 打開終端掏愁，執(zhí)行
gulp css：
- 得到結(jié)果如下：
/* 測試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;
}
關(guān)于browsers: browserlist
3. 插件管理：
- 官網(wǎng)插件地址
- @postcss Twitter
參考: 大漠postcss
