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

前言

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

PostCSS 是什麼

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

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

PostCSS 如何使用

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

PostCSS 經常使用插件

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

PostCSS 有哪些插件

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

PostCSS 插件列舉

Autopreﬁxer：自動補全瀏覽器私有前綴
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 插件包含了 Autopreﬁxer 插件與 postcss-preset-env 插件。java

Autopreﬁxer 插件語法

Autopreﬁxer：自動補全瀏覽器私有前綴，瀏覽器前綴能夠參考 CanIUse 。node

/*源代碼*/
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 語法。git

重置標籤全部屬性github

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

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

統一錨點各狀態的樣式web

/*源代碼*/ 
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) { }
複製代碼

自定義常量sass

/*源代碼*/ 
: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;
}
複製代碼

overﬂow 簡寫

/*源代碼*/
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：鍵值對