PostCSS理解与运用

一、PostCSS是什么

它能够被理解为一个平台，可让一些插件在上面跑

它提供了一个解析器，能够将CSS解析成抽象语法树

经过PostCSS这个平台，咱们可以开发一些插件，来处理CSS。热门插件如autoprefixer

安装

npm install -g postcss-cli     //全局安装postcss
npm install -g autoprefixer      //全局安装autoprefixer

//找到项目，本地安装
npm install postcss --save-dev
npm install autoprefixer --save-dev

二、能解决什么问题

/* CSS3 box-shadow */
@mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $top $left $blur $size $color;
        box-shadow: inset $top $left $blur $size $color;
    } @else {
        -webkit-box-shadow: $top $left $blur $size $color;
        box-shadow: $top $left $blur $size $color;
    }
}

既然咱们已经有SASS了，为何还要PostCSS呢？

它的存在自有独到之处：

根据上述代码能够看到，咱们用SASS来写代码，须要本身作浏览器兼容

而利用PostCSS，咱们按照最简洁最惯用的写法就能够了：

box-shadow: 0 0 3px 5px rgba(222, 222, 222, .3);

autoprefixer 插件会帮咱们作好兼容处理

再次说明了PostCSS是一个平台，容许强大的插件在它上面跑，简化编程。PostCSS实际上改变了一种编程模式

三、怎么实现与LESS 、SASS、Stylus相同的功能

已经强调过，PostCSS只是一个跑插件的平台，而LESS 、SASS是程序式CSS预处理语言。它们并非同样的东西，但却能够实现类似的效果，因此常被一块儿比较

毫无疑问，PostCSS用插件实现和LESS 、SASS、Stylus相同的功能。

PostCSS插件系统

四、PostCSS由哪些东西组成？

从官方介绍来看，只包含如下内容：

1. CSS Parser

2. CSS 节点树 API

3. source map 生成器

4. 生成节点树串

官方API

五、在gulp中使用PostCSS

首先在你的项目中建立两个文件夹，一个命名为 src ，另外一个命名为 dest 。src 文件夹用来放置未处理的CSS文件，而 dest 用来放置PostCSS插件处理后的文件。

顺便回顾一下gulp使用方法：

一、cd 进入项目文件
二、npm init 生成package.json
三、npm install gulp --save-dev 本地安装gulp(为了用插件）
四、npm install gulp-postcss --save-dev  安装插件
五、编写gulpfile.js文件
六、gulp 任务名   //运行任务

第4步以前，须要手动修改一下package.json文件：

{
  "name": "testPostCSS",
  "version": "0.0.1",
  "description": "test PostCSS gulp plugin",
  "keywords": [
    "gulpplugin",
    "PostCSS",
    "css"
  ],
  "author": "dll",
  "license": "MIT",
  "dependencies": {
    "postcss": "^5.0.0",
    "gulp": "~3.8.10"
  },
  "devDependencies": {
    "gulp-postcss": "^6.0.1"
  }
}

在 src 目录中建立一个测试文件 style.css ，并在这个文件中添加一些CSS的测试代码：

编写gulpfile.js文件时把新生成文件路径设置为dest;gulp taskname 执行任务，会获得一个新css文件

gulpfile.js文件这样写：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('css', function () {
  var processors = [
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

 

然鹅，新旧文件并无什么不一样，哈哈哈！！那是由于咱们还没用postcss插件。

前面已经说过，postcss的做用至关于一个跑插件的平台，如今固然没效果咯。

接下来咱们添加postcss插件,仍是以Autoprefixer (处理浏览器私有前缀)为例：

一、

npm install autoprefixer --save-dev
//本地安装，将插件安装到项目

二、在gulpfile.js中添加相应代码：

var autoprefixer = require('autoprefixer');
var processors = [autoprefixer];//在processors中添加插件名，能够添加多个插件

三、给测试文件style.css添加测试代码：

.autoprefixer {
  display: flex;
}

四、执行gulp任务，获得编译好的文件，你会发现，新生成的css文件中自动为display加了浏览器私有前缀。

 

大功告成！！