PostCSS經常使用插件

時間 2019-11-16

標籤 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.css

PostCSS與Scss有什麼區別？

如上面的介紹所述，postCSS是提供了一種使用JS插件來變換樣式的機制，在此基礎之上藉助插件不單單能夠作到支持Scss的功能，還能夠作進一步的拓展，好比能夠使用postcss-next來直接寫最新的css代碼sass

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的功能，借用官方示例post

@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的前面，下面就看一下這兩個插件又是作什麼的url

postcss-simple-vars

用來像sass那樣支持變量使用的插件，選擇符、值以及規則參數均可以使用變量.借用官方示例spa

$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;
  }
  複製代碼