一：看過阮一峰大大介紹react的一篇文章中提到Postcss，甚是感興趣，趁著專案空餘小小研究了一下。那麼到底Postcss到底是啥，能幹啥呢？？

現如今各種外掛和工具多的數不勝數，比如gulp、grunt、webpack，less、scss等也都有對應其工具的相應外掛，還有合併、壓縮、瀏覽器自動重新整理等實用外掛，那Postcss存在的意義是什麼呢？

模組化？！如果你的專案用的webpack或者是gulp，那麼相應的要安裝一堆處理各種檔案的外掛。Postcss可以說就是將你專案中所有處理css的外掛進行了一個二次封裝，讓你基於Postcss這個平臺來完成，用Postcss它獨有的一套體系來處理專案中的css檔案。也就是說如果你的專案中想使用Postcss，想感受Postcss的獨特魅力，那麼less、scss、clean-css等處理css的外掛全部替換成Postcss其獨特的外掛就行了。

那麼好，知道了Postcss是個什麼鬼，來認識一下最出名(最實用)的外掛autoprefixer

autoprefixer是讓你可以偷懶的神器，如果你的專案是PC端的，並且產品大大或者專案經理大大要你相容IE8~9，是不是很頭疼。別怕，用了autoprefixer，寫正常的標準css就好了，autoprefixer會自動幫你新增瀏覽器字首的，哈哈。

Postcss還有許多功能，壓縮合並它都可以，只要你感興趣，完全可以運用到專案當中（不建議，當然如果你願意折騰，請隨意）。

不廢話，上程式碼。

任務思路：新增瀏覽器字首->編譯css4->合併所有css檔案->壓縮處理好的css->移動至目標資料夾（實時監測css這個task）

gulp.task('css', function () {
    gulp.src(['./src/css/*.css'])
        .pipe(changed('dist/css', {hasChanged: changed.compareSha1Digest}))
        .pipe(postCss([
            autoprefixer({
                browsers: ['last 4 version','Android >= 4.0'],//新增瀏覽器最近的四個版本需要的字首，相容安卓4.0以上版本
                cascade: false,//是否美化屬性,預設true
                remove: true//移除不必要的字首
            }), cssNext()]))
        .pipe(concat('main.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.reload({stream:true}));
});
 

你需要安裝的有gulp、gulp-concat、gulp-postcss、autoprefixer、gulp-clean-css、gulp-changed、cssnext、browser-sync。

2017.6.19更新：不建議使用cssnext，css檔案不支援@、$等符號，less和scss本身對於這些符號有自己的定義。cssnext依賴於autoprefixer，css4的屬性需要新增瀏覽器字首，並且cssnext實現的功能以後瀏覽器會怎麼具體實現還存疑，沒有實用價值。為了專案穩定，建議大家瞭解一下就好。二-11已經被主流瀏覽器支援，實測ie和360不行

二：上文提到了還未提案的css4、接下來介紹一下css4的新特性都有哪些？（習慣之後會很強大，cssnext支援的css4點選檢視）

1、父元素選擇器：$div>span 

      例：.wrap>$div>span{color:red;}  此時樣式會落在帶有$的div身上

      例2：$ol>li:only-child{list-style:none;}  此時樣式會落在只有一個li子元素的ol身上。

2、連結地址偽類：分割線////      :any-link（用於所有連結）      :local-link（用於站內連結）

3、文字偽類：分割線////    :dir(ltr)從左到右   :dir(rtl)從右到左

      例：p:dir(rtl){font-size:20px;} 將會渲染成字型大小為20px，文字排列方向從右向左的一行文字。

4、組合對映選擇器：分割線////     :matches()

      例：p:matches( :first-child , .main ){ color: red; }  結果 p:first-child , p.main{ color: red; }

      例2：label:matches(:hover,:focus) input{box-shadow:0px 0px 10px red;} 當label獲取焦點或者hover時，相對應的input會被高亮。對應關係當然是for和id了。

5、ID屬性匹配

      例：li:hover /data-type/ p{background-color:yellow;} 當li的data-type屬性與p的id屬性值相同時且當li處於hover狀態下，對應的p會高亮。

6、wrap-flow:both;文字會在元素的四周包圍。

7、圍繞圖形排列shape，僅在浮動元素上設定會生效

      例：.shape{float:left;shape-outside:circle(50%)} 此時文字會在圖片的周圍按照圖片的輪廓曲線排列

8、包含元素選擇器  :has

      例：table:has(tr:nth-of-type(11)){background-color:red} 若table元素內有超過10個tr，樣式生效。

      例2：div:has(p:nth-child(28)) 若div內的第28個元素為p，該div被選中

9、不包含元素選擇器  :not

      例：a:not(href*=['baidu'])  這樣會選擇所有連結中不包含baidu的連結

      例2：div:not([class|='W_content'],:has(img)) 將會選中所有class不是以W_content開頭或W_content_開頭並且子元素沒有img的div

10、塊級樣式scoped

         例：此時style內的樣式僅在div內部生效，即內部文字會變成紅色

         <section>
             <h1>外部文字</h1>
             <div>
                 <style scoped>
                     h1{
                         color:red;
                     }
                 </style>
                 <h1>內部文字</h1>
             </div>
         </section>

11、var()定義變數：定義變數只能在:root裡面定義，定義變數的方法類似less和scss，因為@和$已經被less和scss佔用了，所以使用‘--’作為變數的標識，使用var()呼叫

        :root {  --mainColor: red;  --commonColor: green; --fontSize: 1rem; }        

        a {  color: var(--commonColor); background-color: var(--mainColor); }     

        結果：a{  color:green;  background-color:red; }

12、定義程式碼塊@apply：在：root內定義，識別符號是 ' -- ' ，@apply呼叫

        :root{ --centered{ display:flex; align-items:center; justify-content:center; } }  .centered{ @apply --contered; }

         結果：.centered{ display:flex; align-items:center; justify-content:center; }

13、calc函式

         例：.wrap{background-position:calc(100%-25px) calc(100%-25px)} 當你不知道容器的寬和高的時候，calc函式可以將背景圖片定位到距離右下角25px的位置

         例2：body{ font-size: calc( var( --fontSize ) * 2 ); }   結果： body{ font-size: 2rem; }

14、blackness：用於顏色，向黑色加深。

         例：a{ color:color(red blackness(10%)); }   結果：a{ color: rgb(230, 0, 0) } //顏色加深了一點

         例2：a{ color:color(red blackness(80%)); }   結果：a{ color: rgb(51, 0, 0); } //已經很接近黑色了

15、alpha：用與顏色，用更清晰的方式改變透明度，rgba中的a

         例：a{ color: color(red alpha(-50%)); }   結果：a{ color: color: rgba(255, 0, 0, 0.5); }

16、gray()：灰度，值越大顏色越淺

         例：a{ color: gray(10); }   結果：a{ color:rgb(10,10,10); }   //特別深的灰色，看起來像黑色

         例2：a{ color: gray(200); }   結果：a{ color:rgb(200,200,200); }   //特別淺的灰色，看起來像銀色

三：css4封裝的功能非常強大，目前這些草稿還未完全定稿，還有變化的可能，也許還會有許多新屬性發布。當css4正式提案時，可能就是我放棄less和scss的時候到了，因為less或者scss與css4有些操作符是一樣的，這會產生衝突，例如@、$。還有一些複雜的屬性和選擇器瀏覽器還不能支援。