PostCSS经常使用插件

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与Scss有什么区别？

如上面的介绍所述，postCSS是提供了一种使用JS插件来变换样式的机制，在此基础之上借助插件不单单能够作到支持Scss的功能，还能够作进一步的拓展，好比能够使用postcss-next来直接写最新的css代码

PostCSS经常使用插件有哪些？

• postcss-utilities

  包含经常使用mixins、shortcuts、helpers的工具集，经过@util utility-name 方式使用，例如

  .margin {
      @util margin(10px 20px 30px null);
    }
    复制代码

  最终被转换成

  .margin {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 30px;
    }
    复制代码

  这个插件只是预置了一些经常使用的工具，若是但愿像scss那样自定义mixin的话就须要用到下面的插件了
• postcss-mixins

  mixins插件就提供了自定义mixin的功能，借用官方示例

  @define-mixin icon $network, $color: blue {
        .icon.is-$(network) {
            color: $color;
            @mixin-content;
        }
        .icon.is-$(network):hover {
            color: white;
            background: $color;
        }
    }
    @mixin icon twitter {
        background: url(twt.png);
    }
    复制代码

  最终被转换成

  .icon.is-twitter {
        color: blue;
        background: url(twt.png);
    }
    .icon.is-twitter:hover {
        color: white;
        background: blue;
    }
    复制代码

  mixins插件使用时必须配置在postcss-simple-vars 和 postcss-nested的前面，下面就看一下这两个插件又是作什么的

• postcss-simple-vars

  用来像sass那样支持变量使用的插件，选择符、值以及规则参数均可以使用变量.借用官方示例

  $dir:    top;
    $blue:   #056ef0;
    $column: 200px;
    
    .menu_link {
        background: $blue;
        width: $column;
    }
    .menu {
        width: calc(4 * $column);
        margin-$(dir): 10px;
    }
    复制代码

  最终会转成

  .menu_link {
        background: #056ef0;
        width: 200px;
    }
    .menu {
        width: calc(4 * 200px);
        margin-top: 10px;
    }
    复制代码

• postcss-nested

  支持Sass 嵌套规则的写法，官方示例

  .phone {
        &_title {
            width: 500px;
            @media (max-width: 500px) {
                width: auto;
            }
            body.is_dark & {
                color: white;
            }
        }
        img {
            display: block;
        }
    }
    复制代码

  最终会转成

  .phone_title {
        width: 500px;
    }
    @media (max-width: 500px) {
        .phone_title {
            width: auto;
        }
    }
    body.is_dark .phone_title {
        color: white;
    }
    .phone img {
        display: block;
    }
    复制代码

• postcss-next

  提供转换最新css语法的功能