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加了瀏覽器私有前綴。

 

大功告成！！