初探PostCSS

PostCSS是什么？官网如是介绍：

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

我的理解就是一个借助JS插件来根据相应规则转化CSS文件为可用文件的一个工具。

那么，它是Sass吗？

是，也不是；他可以完成Sass的功能，但因其插件的广泛，所以可以实现比Sass更多的功能。

不如看一下他可以做什么。

首先安装环境依赖

npm install gulp gulp-postcss autoprefixer cssnext precss --save-dev

然后在根目录下新建文件夹src并新建blog-demo.css文件

//blog-demo.css
/*测试Precss*/
.precss {
color: red;
font-size: 14px;
.child1 {
color: green;
}
&.active {
font-weight: bold;
}
&:hover {
font-size: 18px;
}
}
/*测试cssnext*/
.cssnext{
color: color(red alpha(-10%));
}

/*测试autoprefixer*/
.autoprefixer{
display:flex;
}

编写gulp任务-demo

//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("demo", function(){
var processors = [
precss,
cssnext,
autoprefixer
];

return gulp.src("./src/blog-demo.css")
.pipe(postcss(processors))
.pipe(gulp.dest("./dist"))
})

运行

gulp demo

命令，便会在根目录的dist文件夹下生成blog-demo.css文件：

/*测试Precss*/
.precss {
color: red;
font-size: 14px;
}
.precss .child1 {
color: green;
}
.precss.active {
font-weight: bold;
}
.precss:hover {
font-size: 18px;
}
/*测试cssnext*/
.cssnext{
color: rgba(255, 0, 0, 0.9);
}
/*测试autoprefixer*/
.autoprefixer{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}

刚才所说：“我的理解就是一个借助JS插件来根据相应规则转化CSS文件为可用文件的一个工具。“

以上使用了三个常用插件，分别是precss，功能与sass差不多处理逻辑与嵌套；cssnext主要是转化未来的css语法为当前可用的语法，具体可参考官网；autoprefixer，顾名思义是用来加各个浏览器前缀，便于浏览器渲染识别。

本文github地址

更多参考链接：

postcss的github地址

http://www.w3cplus.com/blog/tags/517.html?page=1

以上内容属于作者个人观点，如有错误，欢迎指正交流。

以下扯淡环节

叫初探postcss是因为技术比较新吗？不是，在网上的资料15年已经很多了，所以出现时间应更早。。

说是初探是因为本人最近刚知道，抱着一种“探”的态度来学习了一下这门技术。感觉还不错，功能挺多也挺实用的，但实际工作中没有使用也有些许遗憾，但让人遗憾的是”你不知道你不知道的“，以后就少了更多实(zhuang)用(bi)技巧。应该多看看外面的世界。