PostCSS常用插件

最新推荐文章于 2024-04-26 10:41:31 发布

weixin_34166847

最新推荐文章于 2024-04-26 10:41:31 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a6ec4a06fb9a01ca47ac242

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;
  }
  复制代码