13518219792
这期内容当中小编将会给大家带来有关如何利用PostCSS跳进未来的CSS- JS-Republic's Blog，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
创新互联建站是一家专业提供金城江企业网站建设,专注与成都网站制作、成都网站设计、外贸营销网站建设、成都h5网站建设、小程序制作等业务。10年已为金城江众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
在说明 PostCSS是什么之前，我们先理解PostCSS不是什么。
实质上，人们第一次听说 PostCSS时，他们倾向于认为这是一款新出的CSS预处理器，类似SASS、LESS和Stylus。
如果你想把它当作预处理器来用，那么它会如预处理器那样工作。同时它也有后处理器、优化工具、兼容未来语法的插件......你想要的功能应有尽有。
PostCSS的主要目的是能让你使用各种工具满足你的需要。
所以你应该把 PostCSS当作一个构建工具。它能让你用各类JavaScript插件来维护你的CSS。 这些插件可以在postcss.parts 这里找到
由于有太多的插件，我们将通过这篇文章检阅一下那些常用和强大的插件。
同时你也会了解到如何搭配使用Gulp创建一个单任务来处理CSS文件。
如果你之前曾用过预处理器，你该体验到不必再写前缀是件多么愉悦的事。
举个例子，不必再这样写
:-webkit-full-screen a {
display: -webkit-box;
display: flex
}
:-moz-full-screen a {
display: flex
}
:-ms-fullscreen a {
display: -ms-flexbox;
display: flex
}
:fullscreen a {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}只需
:fullscreen a {
display: flex
}如果你想自己动手试试，可以用这个可互动demo http://autoprefixer.github.io
文档戳这里：github.com/postcss/autoprefixer
即使PostCSS本不是SASS那样的预处理器，但你依然能通过一些插件来处理Sass类格式的文件。
首选的插件是PreCSS，它集合了大量的PostCSS插件 ，让你可以编写Sass语法的样式。
我邀请你阅读 文档来了解更多细节，也可以玩玩这个可互动 demo 来测试各种可能性。
CSS4，下一代CSS，承诺将改变CSS的书写方式和选择器的使用方式。
遗憾的是，这个版本的规范依然在制定中，并且尚未公布发行时间。
幸运的是，如果你想使用下一代CSS的一些功能，这里有款叫CssNext的插件能帮助你。
CSSNext的官网列出了所有支持的功能：cssnext.io/features/
你也可以在这里玩玩：cssnext.io/playground/
最后但同样重要的，关于优化。CssNano能利用不同的modules压缩和优化你的CSS代码。
我推荐你禁用the z-index，因为它很可能会扰搞乱你原本正常的z－index。
你可以检阅这份可优化列表：cssnano.co/optimisations/ 你也可以在Gitter上和CssNano的创造者聊聊：gitter.im/ben-eb/cssnano
现在，我们看看如何利用Gulp使用这些插件。
首先，以dev dependencies 的方式安装Gulp、Gulp Load Plugins 和Gulp PostCSS 。在控制台执行以下命令：
npm i -D gulp gulp-load-plugins gulp-postcss
在你需要使用Gulp的地方创建一个 gulpfile.js 并加入如下代码。
var gulp = require('gulp'),添加 Gulp Load PLugins的代码：
$ = require('gulp-load-plugins')();Gulp Load Plugins依赖会 通过$调用你需要的插件。
接下来，同样以dev dependency的方式需要安装所需要的PostCSS插件
npm i -D autoprefixer cssnano cssnext precss
安装好后加入到gulpfile.js
// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');接下来开始写 Gulp CSS任务
// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
});在这个任务中，我们首先用一个变量来保存准备用到的PostCSS插件
var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];设置CssNano的 zindex:false 禁止其重设我们的 z-index。
为了处理CSS文件，我们需要检索如下文件：
return gulp.src('./source/css/style.css')然后通过processors变量内的PostCSS插件来处理CSS文件。
使用pipe方法串联起处理过程
.pipe($.postcss(processors))
用如下代码输出处理完成的文件
.pipe(gulp.dest('./public/assets/stylesheets'));以上全部，就是你使用PostCSS 插件处理CSS时所要做的事。
var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');
// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];
return gulp.src('./source/css/style.css')
.pipe($.postcss(processors))
.pipe(gulp.dest('./public/assets/stylesheets'));
});上述就是小编为大家分享的如何利用PostCSS跳进未来的CSS- JS-Republic's Blog了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
