用postcss cli运行postcss

一、验证autoprefixer插件
1、新建项目

• 新建文件夹postcss；
• 在postcss目录中，新建package.json文件，新建css文件夹；
• 在css文件夹新建outfile.css，infile.css文件；
• 在outfile.css文件中写css3语法。

2、安装插件
A、安装postcss-cli插件

cnpm i -D  postcss-cli

B、安装autoprefixer插件

cnpm i -D  autoprefixer

3、配置package.json文件

{
  "name": "postcss",
  "version": "1.0.0",
  "scripts": {
    "postcss": "postcss -u autoprefixer -o css/outfile.css css/infile.css"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.4",
    "postcss-cli": "^4.1.1"
  }
}

4、执行命令

npm run postcss

5、查看文件

/* infile.css */
.app {
  display: flex;
  border-radius: 5px;
  width: 150px;
  height: 50px;
  border: 1px solid #0f0;
  transform: rotate(30deg);
}

/* outfile.css */
.app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 5px;
  width: 150px;
  height: 50px;
  border: 1px solid #0f0;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

如果想在命令行验证其他插件功能，重复上述步骤即可，下面只说插件们输入和输出。
二、postcss-import

/* imported.css */
body {
  background: red;
}

/* infile.css */
@import './imported.css';
body {
  color: blue;
  font-size: 12px;
}

/* outfile.css */
body {
  background: red;
}
body {
  color: blue;
  font-size: 12px;
}

三、postcss-mixins

/* infile.css */
@define-mixin amixin $num, $color: blue {
  .ele-$(num) {
    color: $color;
    @mixin-content;
  }
  .ele-$(num):hover {
    color: white;
    background: $color;
  }
}

@mixin amixin one {
  background: #000;
  border: 1px solid #dfdfdf;
}
@mixin amixin two, red {
  background: pink;
  font-size:18px;
}

/* outfile.css */
.ele-one {
    color: blue;
  background: #000;
  border: 1px solid #dfdfdf;
  }

.ele-one:hover {
    color: white;
    background: blue;
  }
.ele-two {
    color: red;
  background: pink;
  font-size:18px;
  }
.ele-two:hover {
    color: white;
    background: red;
  }

四、postcss-simple-vars

/* infile.css */
$dir:    top;
$blue:   #056ef0;
$column: 200px;

.vars-1 {
  background: $blue;
  width: $column;
}
.vars-2 {
  width: calc(4 * $column);
  margin-$(dir): 10px;
}

/* outfile.css */
.vars-1 {
  background: #056ef0;
  width: 200px;
}
.vars-2 {
  width: calc(4 * 200px);
  margin-top: 10px;
}

五、postcss-nested

/* infile.css */
.nested{
  font-size: 15px;
  p{
    line-height: normal;
  }
  &_title{
    font-weight: 700;
  }
}

/* outfile.css */
.nested{
  font-size: 15px;
}

.nested p{
    line-height: normal;
  }

.nested_title{
    font-weight: 700;
  }

六、postcss-extend

/* infile.css */
%placeholder1{
  color: red;
}
.extended1{
  font-size: 15px;
  @extend %placeholder1;
}
@define-placeholder placeholder2{
  color: blue;
}
.extended2{
  font-size: 18px;
  @extend placeholder2;
}
.placeholder3{
  color: orange;
}
.extended3{
  font-size: 25px;
  @extend .placeholder3;
}

/* outfile.css */
.extended1{
  color: red;
}
.extended1{
  font-size: 15px;
}
.extended2{
  color: blue;
}
.extended2{
  font-size: 18px;
}
.placeholder3, .extended3{
  color: orange;
}
.extended3{
  font-size: 25px;
}

七、postcss-conditionals 

/* infile.css */
@define-mixin amixin $val:5{
  .condition{
    background: red;
    @mixin-content;
    @if $val < 5{
      color: black;
    } @else {
      color: white;
    }
  }
}
@mixin amixin{
  font-size: 12px;
}
@mixin amixin 3{
  font-size:15px;
}

/* outfile.css */
.condition{
    background: red;
  font-size: 12px;
      color: white
  }
.condition{
    background: red;
  font-size:15px;
      color: black
  }

条件语句在混合中定义的，运行的时候，记得安装混合命令和条件命令。

八、postcss-for

/* infile.css */
@for $i from 1 to 4 {
  .tab-$i { width: $(i)px; }
}

@for $i from 1 to 5 by 2 {
  .menu-$i { width: $(i)px; }
}

/* outfile.css */
.tab-1 { width: 1px; }
.tab-2 { width: 2px; }
.tab-3 { width: 3px; }
.tab-4 { width: 4px; }

.menu-1 { width: 1px; }

.menu-3 { width: 3px; }

.menu-5 { width: 5px; }

九、postcss-each

/* infile.css */
@each $icon in dog, tiger, lien {
  .icon-$(icon) {
    background: url('icons/$(icon).png');
  }
}

@each $val, $i in dog, tiger {
  .$(val)-img {
    background: url("$(val)_$(i).png");
  }
}

@each $animal, $color in (dog, lien), (black, blue) {
  .$(animal)-icon {
    background-image: url('/images/$(animal).png');
    border: 2px solid $color;
  }
}

/* outfile.css */
.icon-dog {
    background: url('icons/dog.png');
  }
.icon-tiger {
    background: url('icons/tiger.png');
  }
.icon-lien {
    background: url('icons/lien.png');
  }


.dog-img {
    background: url("dog_0.png");
  }


.tiger-img {
    background: url("tiger_1.png");
  }


.dog-icon {
    background-image: url('/images/dog.png');
    border: 2px solid black;
  }


.lien-icon {
    background-image: url('/images/lien.png');
    border: 2px solid blue;
  }

十、postcss-color-alpha

/* infile.css */
.alpha-c1 {
  color: black(.1)
}
.alpha-c2 {
  color: white(0.2);
}
.alpha-c3 {
  color: #0fc.3;
}
.alpha-c4 {
  color: #00ffcc.45;
}
.alpha-c5 {
  border-color: #000 #000.5 white white(0.5);
}
.alpha-c6 {
  text-shadow: 1px 1px 1px #0fc.1, 3px 3px 5px rgba(#fff, .5);
}


/* outfile.css */
.alpha-c1 {
  color: rgba(0, 0, 0, 0.1)
}
.alpha-c2 {
  color: rgba(255, 255, 255, 0.2);
}
.alpha-c3 {
  color: rgba(0, 255, 204, 0.3);
}
.alpha-c4 {
  color: rgba(0, 255, 204, 0.45);
}
.alpha-c5 {
  border-color: #000 rgba(0, 0, 0, 0.5) white rgba(255, 255, 255, 0.5);
}
.alpha-c6 {
  text-shadow: 1px 1px 1px rgba(0, 255, 204, 0.1), 3px 3px 5px rgba(255, 255, 255, 0.5);
}

十一、总结
本篇内容通过命令行方式介绍了一些postcss插件，来模拟sass预处理器的功能，变量，继承，嵌套，混合，引入，个人还是觉得sass在预处理器方面做得好。
遇到了一个问题，在infile.css文件中，写入变量和混合代码，运行postcss-simple-vars的相关命令时，老是报错说混合中的形参没定义，导致变量代码不能成功编译出来。然而，如果运行postcss-mixins相关命令，混合代码可以正常编译。

转载于:https://www.cnblogs.com/camille666/p/postcss_cli.html