淺談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.

PostCSS是一個基於JS插件的轉換樣式的工具。PostCSS插件能夠像預處理器，它們能夠優化和autoprefix代碼；能夠添加將來語法；能夠添加變量和邏輯；能夠提供完整的網格系統；能夠提供編碼的快捷方式......還有不少不少。

PostCSS不是

• 儘管表面上它看起來是一個預處理器，其實它不是一個預處理器

• 儘管表面上它看起來是一個後處理器，其實它也不是一個後處理器

• 儘管它能夠促進、支持將來的語法，其實它不是將來語法

• 儘管它能夠提供清理、優化代碼這樣的功能，其實它不是清理、優化代碼的工具

• 它不是任何一件事情，這也意味者它潛力無限，你能夠根據本身的須要配置你須要的功能

PostCSS的優勢

• 多樣化的功能插件，建立了一個生態的插件系統

• 根據你須要的特性進行模塊化

• 快速編譯

• 建立本身的插件，且具可訪問性

• 能夠像普通的CSS同樣使用它

• 不依賴於任何預處理器就具有建立一個庫的能力

• 能夠與許多流行工具構建無縫部署

webpack設置

如今大多數同事使用的還都是Gulp，大漠老師寫過Gulp設置的文章，很詳細，我就不復制粘貼了。傳送門在這：PostCSS深刻學習：Gulp設置。
我這邊講解下webpack的基本配置(咱們默認你已經瞭解NPM包等知識...github原址:PostCSS for Webpack
首先

npm install postcss-loader --save-dev

在webpack配置文件中設置postcss

var precss       = require('precss');
var autoprefixer = require('autoprefixer');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return [precss, autoprefixer];
    }
}

你須要安裝兩個插件來實現這個例子
npm install precss --save-dev
npm install autoprefixer --save-dev

PostCSS插件

PostCSS的核心就是它的插件系統。如何選擇PostCSS的插件，這一切取決於你的心情。

查找插件

PostCSS在Github上有一個插件倉庫，其主頁維護了插件列表。這個插件列表會常常更新，因此說這個地方是一個至關可靠的地方，能夠看到插件的發展，在哪方面可用。

PostCSS Twitter

你也能夠關注PostCSS的Twitter帳號。@PostCSS。每有新插件發佈。Twitter上就會發布，因此你只需關注這個帳號就能夠發現。

幾款讓你用上就離不開的插件

如下介紹幾款本農正在使用的幾款插件

PreCSS

npm install precss --save-dev

PreCSS語法和Sass極其類似，你能夠絕不費力的使用它。

嵌套

PreCSS中的嵌套同Sass或LESS中的實現方法同樣，都是經過在選擇器的大括號內嵌套選擇器。例如:

.menu {
    width: 100%;
    a {
        text-decoration: none;
    }
    &::before {
        content: '';
    }
}

變量

在PreCSS中保持了相似Sass聲明變量的語法，在$符號後面緊跟變量名，而後變量名後面有冒號:，其後再是變量值。

$text_color: #232323;

body {
    color: $text_color;
}

條件

在PreCSS中也有條件命令這樣的特性，其語法和Sass的相同，也是使用@if和@else；例如：

$column_layout: 2;

.column {
    @if $column_layout == 2 {
        width: 50%;
        float: left;
    }   @else {
        width: 100%;
    }
}

Imports

經過@import能夠將多個CSS文件合併成一個。例如：

import 'normalize.css';

小結

做爲PostCSS中強大的預處理器PreCSS插件包，它有不少特色：

• PreCSS中的嵌套和Sass或LESS中的嵌套同樣

• PreCSS聲明變量像Sass的語法

• 在PreCSS中也有@if和@else這樣的條件命令的功能特性

• @for和@each循環是有效的

• 在PreCSS中使用@define-mixin mixin_name $arg1,$arg2{...}語法來聲明

• 在PreCSS中使用@mixin mixin_name pass_arg1, pass_arg2;語法來調用

• @mixin-content使用方法相似於Sass中的@content

• PreCSS中使用@define-extend extend_name{...}來聲明可擴展的代碼塊

• PreCSS中使用@extend extend_name語法來調用聲明的代碼擴展塊

• 在PreCSS可使用@import中導入CSS文件

Autoprefixer

npm install autoprefixer --save-dev

在咱們使用Sass的時候咱們會常用Compass庫中使用@include box-sizing(border-box);來解決box-sizing屬性在各瀏覽器私有前綴的問題。但它自己存在一些問題：

• 要知道屬性須要的前綴，而後才能決定如何部署混合宏

• 必須知道混合宏的名稱和如何調用混合宏

• 必須時刻關注瀏覽器對每一個屬性的私有前綴變化（好比，box-sizing如今就再也不須要前綴）

當咱們使用Autoprefixer的時候發現這些都不是問題，它能夠根據CanIUse.com數據對屬性自動添加瀏覽器的私有前綴。
書寫沒有私有前綴的css(其實是忘了寫...)

:fullscreen a {
    display: flex
}

Autoprefixer會根據當前不一樣瀏覽器支持的特性來爲你添加前綴，編譯後的代碼：

:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

更多關於Autoprefixer的信息能夠異步傳送門：Autoprefixer的github地址

cssnano

它提供了一個很是強大的CSS優化的插件包cssnano，這個插件包是一個能夠即插即用的。它聚集了大約25個插件，只須要執行一個命令，就能夠作多方面不一樣類型的優化。它包括：

• 刪除空格和最後一個分號

• 刪除註釋

• 優化字體權重

• 丟棄重複的樣式規則

• 優化calc()

• 壓縮選擇器

• 減小手寫屬性

• 合併規則

提供個官網的例子

h1::before, h1:before {
    margin: 10px 20px 10px 20px;
    color: #ff0000;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    font-weight: normal;
    font-weight: normal;
}
/* invalid placement */
@charset "utf-8";

編譯後

@charset "utf-8";h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}

更多特性和功能能夠一步官網查看。官網傳送門：cssnano.co

Sass和PostCSS

若是你對PostCSS的各類特性很感興趣，但又不想放棄熟練使用的Sass。不用擔憂，你能夠徹底把Sass與PostCSS結合使用.
由於你已經使用了Node.js來運行Gulp或webpack和PostCSS.因此使用Sass最簡單的方法就是使用LibSass。你只須要安裝node-sass.

npm install node-sass --save-dev

而後只須要在配置文件中先對.scss文件進行處理後再用PostCSS進行處理。

小結

當我使用了一次PostCSS後我就深深的愛上了它，我相信你也會有這種感受。這篇文章只是簡單的介紹了一下PostCSS，推薦大漠老師的文章：大漠老師POSTCSS；