PostCSS 經常使用插件與語法介紹

前言

兩年前本身就開始學習 PostCSS ，但在開發中使用卻不到一年。
沒有使用的緣由是以爲 PostCSS 插件太多，學習成本很高。
但在開發中實際使用後，以爲 PostCSS 仍是有很大的便捷性，諸如自動補全瀏覽器前綴這一功能就節省了不少時間，把繁瑣的工做交給了程序，心思都集中在代碼邏輯上，會讓開發的過程輕鬆很多。

PostCSS 是什麼

PostCSS 是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具。

• PostCSS 是處理 CSS 的一個插件體系；
• 能夠對 CSS 進行各類不一樣的轉換和處理；
• 把繁瑣複雜的工做交由程序去處理；
• 把開發⼈人員解放出來。

PostCSS 如何使用

• PostCSS 通常不單獨使用，而是與已有的構建工具進行集成；
• PostCSS 與主流的構建工具，如 Webpack、Grunt 和 Gulp 均可以進行集成；
• 完成集成以後，選擇知足功能需求的 PostCSS 插件並進行配置。

PostCSS 經常使用插件

PostCSS 的插件數量不少，能夠根據實際場景選擇不一樣的插件。

PostCSS 有哪些插件

• 插件查詢地址：www.postcss.parts/
• 常⽤用插件列列表：github.com/postcss/pos…

PostCSS 插件列舉

• Autoprefixer：自動補全瀏覽器私有前綴
• precss：CSS 預處理（整合 Sass、LESS 或 Stylus 功能，語法基本和 Sass 的相同）
• postcss-import：經過 @import，整合多個 CSS 文件
• css-mqpacker：將相同的 CSS 媒體查詢規則合併爲一個
• cssnano：壓縮 CSS 文件
• postcss-color-rgba-fallback：給 rgba 顏色建立降級方案(添加備用顏色)
• postcss-opacity：給 opacity 提供降級方案（給 IE 瀏覽器添加濾鏡屬性）
• node-pixrem：讓 IE8 ⽀持 rem 單位
• postcss-pseudoelements：將僞元素的 :: 轉換爲 : ( IE8 不不⽀支持 ::)

PostCSS 語法介紹

如下主要介紹 precss 插件的語法，precss 插件包含了 Autoprefixer 插件與 postcss-preset-env 插件。

Autoprefixer 插件語法

Autoprefixer：自動補全瀏覽器私有前綴，瀏覽器前綴能夠參考 CanIUse 。

/*源代碼*/
p{     
    transform: scale(1);     
    animation: ani 1s linear; 
}
複製代碼

/*編譯後代碼*/
p{     
    -webkit-transform:scale(1);             
    transform:scale(1);     
    -webkit-animation:ani 1s linear;             
    animation:ani 1s linear; 
} 
複製代碼

postcss-preset-env 插件語法介紹

postcss-preset-env：支持現代的 css 語法。

• 重置標籤全部屬性

  /*源代碼*/
  a{     
      all: initial; 
  }
  複製代碼

  /*編譯後代碼*/
  a{     
      -webkit-animation:none 0s ease 0s 1 normal none running;     
      -webkit-backface-visibility:visible;     
      -o-border-image:none;    
      ……
  }
  複製代碼

• 統一錨點各狀態的樣式

  /*源代碼*/ 
  a:any-link{     
      background-color: yellow;
  } 
  複製代碼

  /*編譯後代碼*/
  a:-webkit-any-link{     
      background-color:#ff0;
  } 
  a:-moz-any-link{     
      background-color:#ff0;
  } 
  a:link,a:visited{     
      background-color:#ff0; 
  }
  複製代碼

• 自定義媒體查詢

  /*源代碼*/ 
  @custom-media --narrow-window (max-width: 30em); 
  @media (--narrow-window) { } 
  複製代碼

  /*編譯後代碼*/
  @media (max-width: 30em) { }
  複製代碼

• 自定義常量

  /*源代碼*/ 
  :root{     
      --some-length: 32px; 
  } 
  p{     
      height: var(--some-length);     
      width: var(--some-length); 
  }
  複製代碼

  /*編譯後代碼*/
  :root{     
      --some-length:32px;
  } 
  p{     
      height:32px;     
      height:var(--some-length);     
      width:32px;     
      width:var(--some-length); 
  } 
  複製代碼

• 自定義選擇器

  /*源代碼*/ 
  @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading {     
      margin-block: 0; 
  }
  複製代碼

  /*編譯後代碼*/
  h1,h2,h3,h4,h5,h6{     
      margin-top:0;     
      margin-bottom:0;
  }
  複製代碼

• 支持嵌套規則

  /*源代碼*/
  article{
     &p{
         color: #333;
     }
  }
  複製代碼

  /*編譯後代碼*/
  article p {
      color: #333;
  }
  複製代碼

• overflow 簡寫

  /*源代碼*/
  html{     
      overflow: hidden auto;
  } 
  複製代碼

  /*編譯後代碼*/
  html{     
      overflow-x:hidden;     
      overflow-y:auto;     
      overflow:hidden auto;
  } 
  複製代碼

precss 插件語法介紹

precss 支持相似sass語法，並支持將來語法，包含 postcss-preset-env 組件。

• 嵌套可使用 & 符，把父選擇器複製到子選擇器中

  /*源代碼*/
  article {     
      margin-top: 20px;     
      &p{         
          color: #333;     
      }
  } 
  複製代碼

  /*編譯後代碼*/
  article{     
      margin-top:20px;
  } 
  article p{         
      color:#333;
  } 
  複製代碼

• 使用 $ 符聲明變量

  /*源代碼*/
  $text_color: #232323; 
  $border_comn: 1px solid red; 
  body{     
      color: $text_color;     
      border: $border_comn;
  }
  複製代碼

  /*編譯後代碼*/
  body{     
      color:#232323;     
      border:1px solid red;
  }
  複製代碼

• 用 @if 和 @else 來控制循環

  /*源代碼*/
  $column_layout: 2; 
  .column{     
      @if $column_layout == 2{         
          width: 50%;         
          float: left;     
      }@else{         
          width: 100%;    
      }
  } 
  複製代碼

  /*編譯後代碼*/
  .column{         
      width:50%;         
      float:left;
  }
  複製代碼

• 用 @for 和 @each 來循環
  • @for 循環：⽤用⼀一個計數器器變量量，來設置循環的週期

    /*源代碼*/
    @for $i from 1 to 5{     
        p:nth-of-type($i){         
            margin-left: calc(100% / $i);     
        } 
    } 
    複製代碼

    /*編譯後代碼*/
    p:first-of-type{         
        margin-left:100%;     
    } 
    p:nth-of-type(2){         
        margin-left:50%;
    } 
    p:nth-of-type(3){         
        margin-left:33.33333%;     
    } 
    p:nth-of-type(4){         
        margin-left:25%;
    } 
    p:nth-of-type(5){         
        margin-left:20%;
    } 
    複製代碼

    /*源代碼*/
    @for $count from 1 to 5 by 2 {     
        .col-$count {         
            width: $count%;     
        }
    }  
    複製代碼

    /*編譯後代碼*/
    .col-1{         
        width:1%;     
    } 
    .col-3{         
        width:3%;     
    } 
    .col-5{         
        width:5%;
    } 
    複製代碼

  • @each 循環：循環週期是⼀一個列列表，⽽而不不是數字

    /*源代碼*/
    $social: twitter,facebook,youtube; 
    @each $icon in ($social){     
        .icon-$(icon){         
            background: url('img/$(icon).png');     
        }
    } 
    複製代碼

    /*編譯後代碼*/
    .icon-twitter{         
        background:url(img/twitter.png);    
    } 
    .icon-facebook{         
        background:url(img/facebook.png);     
    } 
    .icon-youtube{         
        background:url(img/youtube.png);     
    } 
    複製代碼

• mixin 建立 css 模板函數
  • 經過 @mixin mixin_name($arg1, $arg2) {...} 來聲明
  • 使用 @include mixin_name($arg1, $arg2) 來調用

    /*源代碼*/
    @mixin heading-text($color: #242424, $font-size: 4em) {   
        color: $color;   
        font-size: $font-size; 
    } 
    h1, h2, h3 {   
        @include heading-text; 
    } 
    .some-heading-component>:first-child{   
        @include heading-text(#111111, 6em);
    }
    複製代碼

    /*編譯後代碼*/
    h1,h2,h3{   
        color:#242424;   
        font-size:4em;
    } 
    .some-heading-component>:first-child{   
        color:#111;   
        font-size:6em;
    }
    複製代碼

• 經過 @extend 建立 css 模板

  /*源代碼*/
  %thick-border {   
      border: thick dotted red; 
  } 
  .modal {   
      @extend %thick-border;   
      color: red;
  }
  複製代碼

  /*編譯後代碼*/
  .modal{
      border:thick dotted red;color:red;
  } 
  複製代碼

• @at-root 生成代碼到根部

  /*源代碼*/
  .parent {     
      font-size: 20px;   
      @at-root{     
          .child {       
              font-size: 25px;     
          }   
      }
  }
  複製代碼

  /*編譯後代碼*/
  .child{       
      font-size:25px;     
  } 
  .parent{     
      font-size:20px;
  } 
  複製代碼

• 直接引⽤用css屬性的值，例如@color

  /*源代碼*/
  .Test {   
      margin-left: 20px;   
      margin-right: @margin-left;   
      color: red;   
      background: @color url('test.png');   
      line-height: 1.5;   
      font-size: @(line-height)em;
  }
  複製代碼

  /*編譯後代碼*/
  .Test{   
      margin-left:20px;   
      margin-right:20px;   
      color:red;   
      background:red url(test.png);   
      line-height:1.5;   
      font-size:1.5em; 
  } 
  複製代碼

自定義 PostCSS 組件

一個 PostCSS 插件最基礎的構成以下：

var postcss = require('postcss'); 
module.exports = postcss.plugin('PLUGIN_NAME', function (opts) {     
        opts = opts || {};     
        // 傳⼊入配置相關的代碼 
        return function (root, result) {         
            // 轉化CSS 的功能代碼 
        }; 
}); 
複製代碼

而後按照不同的需求狀況來決定是否引入第三方模塊，是否有額外配置項，最後在包含 root，result 的匿名函數中進行最爲核心的轉換代碼功能編寫。

• root（css）：也是整個 CSS 代碼段，包含多個 rule；
• rule：包含一個 CSS class 範圍內的代碼段；
• nodes：代指 rule 中 {} 中間的多個 decl 部分；
• decl：單行 CSS ，即有屬性與值的部分；
• prop value：鍵值對