preface

I started learning PostCSS two years ago, but I’ve been using it in development for less than a year. The reason for not using PostCSS is that there are too many plug-ins and the learning cost is too high. However, PostCSS is still very convenient to use in development. Features such as auto-complete browser prefixes save a lot of time and focus on code logic, which makes development a lot easier.

What is PostCSS

PostCSS is a tool for converting CSS code with JavaScript tools and plug-ins.

  • PostCSS is a plug-in architecture that handles CSS;
  • CSS can be transformed and manipulated in a variety of ways;
  • The tedious and complex work to the procedures to deal with;
  • Free up the developers.

How to use PostCSS

  • PostCSS is generally not used on its own, but integrated with existing build tools;
  • PostCSS integrates with major build tools such as Webpack, Grunt, and Gulp.
  • After the integration is complete, select the PostCSS plug-in that meets the function requirements and configure it.

PostCSS common plug-ins

PostCSS has a large number of plug-ins. You can select different plug-ins based on actual scenarios.

What plug-ins PostCSS has

  • Plug-in query address: www.postcss.parts/
  • List of commonly used plug-ins: github.com/postcss/pos…

PostCSS plug-in list

  • Autoprefixer: Automatic completion of browser private prefixes
  • Precss: CSS preprocessing (integrating Sass, LESS or Stylus functions, with basically the same syntax as Sass)
  • Postcss-import: Use @import to consolidate multiple CSS files
  • Css-mqpacker: Merges the same CSS media query rules into one
  • Cssnano: compresses the CSS file
  • Postcss-color-rgba-fallback: Create downgrade scheme for RGBA colors (add alternate colors)
  • Postcss-opacity: provides animation-function degradation (adding filter properties to IE)
  • Node-pixrem: Lets IE8 support REM units
  • postcss-pseudoelements: will pseudo element: :convert:(IE8 is not supported: :)

PostCSS syntax description

The following focuses on the syntax of precss, which includes Autoprefixer and PostCSS-PRESET – Env.

Autoprefixer plug-in syntax

Autoprefixer: Automatic completion of browser private prefixes. See CanIUse for browser prefixes.

/* Source code */
p{     
    transform: scale(1);     
    animation: ani 1s linear; 
}
Copy the code
/* Compiled code */
p{     
    -webkit-transform:scale(1);             
    transform:scale(1);     
    -webkit-animation:ani 1s linear;             
    animation:ani 1s linear; 
} 
Copy the code

Postcss-preset – Env syntax introduction

Postcss-preset -env: Supports modern CSS syntax.

  • Resets all attributes of the label

    /* Source code */
a{     
    all: initial; 
}
Copy the code
    A {-webkit-animation:none 0s ease 0s 1 normal none running; -webkit-backface-visibility:visible; -o-border-image:none; ... }Copy the code

  • Unify the styles of anchor point states

    /* Source code */ 
a:any-link{     
    background-color: yellow;
} 
Copy the code
    /* Compiled code */
a:-webkit-any-link{     
    background-color:#ff0;
} 
a:-moz-any-link{     
    background-color:#ff0;
} 
a:link.a:visited{     
    background-color:#ff0; 
}
Copy the code

  • Custom media query

    /* Source code */ 
@custom-media --narrow-window (max-width: 30em); 
@media (--narrow-window) { } 
Copy the code
    /* Compiled code */
@media (max-width: 30em) {}Copy the code

  • Custom constant

    /* Source code */ 
:root{     
    --some-length: 32px; 
} 
p{     
    height: var(--some-length);     
    width: var(--some-length); 
}
Copy the code
    /* Compiled code */
:root{     
    --some-length:32px;
} 
p{     
    height:32px;     
    height:var(--some-length);     
    width:32px;     
    width:var(--some-length); 
} 
Copy the code

  • Custom selectors

    /* Source code */ 
@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading {     
    margin-block: 0; 
}
Copy the code
    /* Compiled code */
h1.h2.h3.h4.h5.h6{     
    margin-top:0;     
    margin-bottom:0;
}
Copy the code

  • Support for nested rules

    /* source code */ article{&p{color: #333; }}Copy the code
    /* Compiled code */
article p {
    color: # 333;
}
Copy the code

  • The over fl ow shorthand

    /* Source code */
html{     
    overflow: hidden auto;
} 
Copy the code
    /* Compiled code */
html{     
    overflow-x:hidden;     
    overflow-y:auto;     
    overflow:hidden auto;
} 
Copy the code

Precss plugin syntax introduction

Precss supports SASS like syntax and supports future syntax, including the PostCSS-PRESET -env component.

  • Nesting can be used&To copy the parent selector into the child selector 
    /* source code */ article {margin-top: 20px; &p{ color: #333; }}Copy the code
    /* Compiled code */
article{     
    margin-top:20px;
} 
article p{         
    color:# 333;
} 
Copy the code
  • use$Character declaration variable 
    $text_color: #232323; $border_comn: 1px solid red; body{ color: $text_color; border: $border_comn; }Copy the code
    /* Compiled code */
body{     
    color:# 232323;     
    border:1px solid red;
}
Copy the code
  • with@if 和 @elseTo control the cycle 
    $column_layout: 2; .column{ @if $column_layout == 2{ width: 50%; float: left; }@else{ width: 100%; }}Copy the code
    /* Compiled code */
.column{         
    width:50%;         
    float:left;
}
Copy the code
  • with@for 和 @eachTo cycle
    • @for loop: use a counter variable to set the period of the loop 
      /* source code */ @for $I from 1 to 5{p:nth-of-type($I){margin-left: calc(100% / $I); }}Copy the code
      /* Compiled code */
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%;
} 
Copy the code
      $count from 1 to 5 by 2 {. Col -$count {width: $count%; }}Copy the code
      /* Compiled code */
.col-1{         
    width:1%;     
} 
.col-3{         
    width:3%;     
} 
.col-5{         
    width:5%;
} 
Copy the code
    • @each loop: The cycle is a list of columns, not numbers 
      /* Source code */ $social: Twitter, Facebook, YouTube; @each $icon in ($social){ .icon-$(icon){ background: url('img/$(icon).png'); }}Copy the code
      /* Compiled code */
.icon-twitter{         
    background:url(img/twitter.png);    
} 
.icon-facebook{         
    background:url(img/facebook.png);     
} 
.icon-youtube{         
    background:url(img/youtube.png);     
} 
Copy the code
  • Mixin creates CSS template functions
    • through@mixin mixin_name($arg1, $arg2) {... }To declare
    • use@include mixin_name($arg1, $arg2)To invoke the 
      /* source code */ @mixin fadeing-text ($color: #242424, $font: 4em) {color: $color; font-size: $font-size; } h1, h2, h3 { @include heading-text; } .some-heading-component>:first-child{ @include heading-text(#111111, 6em); }Copy the code
      /* Compiled code */
h1.h2.h3{   
    color:# 242424;   
    font-size:4em;
} 
.some-heading-component>:first-child{   
    color:# 111;   
    font-size:6em;
}
Copy the code
  • Create a CSS template using @extend 
    /* source code */ % thick-dotted {border: thick dotted; } .modal { @extend %thick-border; color: red; }Copy the code
    /* Compiled code */
.modal{
    border:thick dotted red;color:red;
} 
Copy the code
  • @at-root Generates code to the root 
    /* source code */. Parent {font-size: 20px; @at-root{ .child { font-size: 25px; }}}Copy the code
    /* Compiled code */
.child{       
    font-size:25px;     
} 
.parent{     
    font-size:20px;
} 
Copy the code
  • Directly reference the value of the CSS property, such as @color 
    /* Source code */
.Test {   
    margin-left: 20px;   
    margin-right: @margin-left;   
    color: red;   
    background: @color url('test.png');   
    line-height: 1.5;   
    font-size: @(line-height)em;
}
Copy the code
    /* Compiled code */
.Test{   
    margin-left:20px;   
    margin-right:20px;   
    color:red;   
    background:red url(test.png);   
    line-height:1.5;   
    font-size:1.5 em; 
} 
Copy the code

Customize PostCSS components

The basic composition of a PostCSS plugin is as follows:

var postcss = require('postcss'); 
module.exports = postcss.plugin('PLUGIN_NAME'.function (opts) {     
        opts = opts || {};     
        // Pass in the configuration related code
        return function (root, result) {         
            // Convert the CSS function code
        }; 
}); 
Copy the code

Then, according to different requirements, we will decide whether to introduce third-party modules and whether to have additional configuration items. Finally, we will write the most core conversion code function in the anonymous function including root and result.

  • Root (CSS) : is also the entire CSS code section, containing multiple rules;
  • Rule: contains a CSS class-wide code segment;
  • Nodes: represents the multiple DECL parts in the middle of {} in the rule;
  • Decl: single-line CSS, that is, sections with properties and values;
  • Prop Value: key value pairs