首页 > 代码库 > PostCSS理解与运用

PostCSS理解与运用

1、PostCSS是什么

它可以被理解为一个平台,可以让一些插件在上面跑

它提供了一个解析器,可以将CSS解析成抽象语法树

通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer

安装

npm install -g postcss-cli     //全局安装postcssnpm install -g autoprefixer      //全局安装autoprefixer
//找到项目,本地安装npm install postcss --save-devnpm install autoprefixer --save-dev

2、能解决什么问题

/* 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实际上改变了一种编程模式

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

已经强调过,PostCSS只是一个跑插件的平台,而LESS 、SASS是程序式CSS预处理语言。它们并不是一样的东西,但却可以实现相似的效果,所以常被一起比较

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

PostCSS插件系统

4、PostCSS由哪些东西组成?

从官方介绍来看,只包含以下内容:

  1. CSS Parser

  2. CSS 节点树 API

  3. source map 生成器

  4. 生成节点树串

技术分享

官方API

5、在gulp中使用PostCSS

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

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

1、cd 进入项目文件2、npm init 生成package.json3、npm install gulp --save-dev 本地安装gulp(为了用插件)4、npm install gulp-postcss --save-dev  安装插件5、编写gulpfile.js文件6、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 (处理浏览器私有前缀)为例:

1、

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

2、在gulpfile.js中添加相应代码:

var autoprefixer = require(‘autoprefixer‘);var processors = [autoprefixer];//在processors中添加插件名,可以添加多个插件

3、给测试文件style.css添加测试代码:

.autoprefixer {  display: flex;}

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

 

大功告成!!

PostCSS理解与运用