postcss

+POST: [what the fuck of postcss](http://i0011.com/2016/01/28/what-the-fuck-of-postcss/)
+
+
+PS：POSTCSS使用插件：autoprefixer,precss,postcss-calc
+
+在不采用缩写等提高工作效率插件的情况下，代码行数因不需要处理兼容性问题有所降低，其他地方只有细微的使用差别：比如`for`,`calc`以及variable
\ No newline at end of file

+@-webkit-keyframes scale {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    45% {
+        -webkit-transform: scale(0.1);
+        transform: scale(0.1);
+        opacity: 0.7;
+    }
+
+    80% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes scale {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    45% {
+        -webkit-transform: scale(0.1);
+        transform: scale(0.1);
+        opacity: 0.7;
+    }
+
+    80% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.loading-mask {
+    position: fixed;
+    background: rgba(0,0,0,.1);
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    
+    .loading {
+        position: absolute;
+        width: 60px;
+        height: 20px;
+        top: 50%;
+        left: 50%;
+        margin-top: -10px;
+        margin-left: -30px;
+
+        > div {
+            display: inline-block;
+            background: #fff;
+            width: 15px;
+            height: 15px;
+            @include border-radius(100%);
+            margin: 2px;
+
+            $init: 0.12;
+            @for $i from 1 through 3 {
+                &:nth-child(#{$i}) {
+                    -webkit-animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08);
+                    animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08);
+                }
+
+                $init: ($i + 1) * 0.12;
+            }
+        }
+    }
+}
\ No newline at end of file

+@keyframes scale {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    45% {
+        transform: scale(0.1);
+        opacity: 0.7;
+    }
+
+    80% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.loading-mask {
+    position: fixed;
+    background: rgba(0,0,0,.1);
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    
+    .loading {
+        position: absolute;
+        width: 60px;
+        height: 20px;
+        top: 50%;
+        left: 50%;
+        margin-top: -10px;
+        margin-left: -30px;
+
+        > div {
+            display: inline-block;
+            background: #fff;
+            width: 15px;
+            height: 15px;
+            border-radius: 100%;
+            margin: 2px;
+
+            $init: 0.12;
+            @for $i from 1 to 3 {
+                &:nth-child($i) {
+                    animation: scale .75s $(init)s infinite cubic-bezier(.2,.68,.18,1.08);
+                }
+
+                $init: calc(($i + 1) * 0.12);
+            }
+        }
+    }
+}
\ No newline at end of file