PostCSS理解与运用

2018/09/13 11:12
阅读数 348

 

 

1、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

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.json
3、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加了浏览器私有前缀。

 

大功告成!!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部