scss

17.scss/index.css

@@ -12,16 +12,16 @@ body, html {
 }
 
 /* 你好 */
+.windy, ul {
+  color: #ff0;
+  background-color: #f00;
+}
+
 h1 {
+  width: 400px;
+  height: 100px;
   font-size: 50px;
-  color: plum;
-  width: 200px;
-  height: 300px;
-  margin: 10px;
-  border: 3px solid #00f;
-  border-radius: 30px;
-  background: #f00;
-  box-shadow: 30px 20px 4px plum;
+  background: yellow;
 }
 
 ul {
@@ -29,6 +29,10 @@ ul {
   height: 400px;
   background: #ff0;
   list-style: none;
+  width: 200px;
+  height: 300px;
+  margin: 10px;
+  border: 3px solid #00f;
 }
 
 ul li {

17.scss/index.min.css

@@ -1 +1 @@
-*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}body,html{font-size:30px}h1{font-size:50px;color:plum;width:200px;height:300px;margin:10px;border:3px solid #00f;border-radius:30px;background:red;box-shadow:30px 20px 4px plum}ul{width:400px;height:400px;background:#ff0;list-style:none}ul li{padding:10px}ul li a{text-decoration:none;color:#00f;font-size:40px;font-weight:bold}ul li a:hover{color:red}p{color:blue}
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}body,html{font-size:30px}.windy,ul{color:#ff0;background-color:#f00}h1{width:400px;height:100px;font-size:50px;background:#ff0}ul{width:400px;height:400px;background:#ff0;list-style:none;width:200px;height:300px;margin:10px;border:3px solid #00f}ul li{padding:10px}ul li a{text-decoration:none;color:#00f;font-size:40px;font-weight:bold}ul li a:hover{color:red}p{color:blue}

17.scss/index.scss

@@ -5,6 +5,20 @@
 $a: #f00;
 $b: 50;
 $c: #ff0 !default;
+
+
+// 占位符
+// %placeholder => %
+%www {
+    color: aquamarine;
+}
+
+// 基类
+.windy {
+    color: #ff0;
+    background-color: #f00;
+}
+
 @mixin sun {
     width: 200px;
     height: 300px;
@@ -29,14 +43,26 @@ $c: #ff0 !default;
     //     box-shadow: 30px 20px 4px plum;
     // }
 }
+@function xxx($a) {
+    @return 200 * $a;
+}
 h1 {
+    width: #{xxx(2)}px;
+    // height: #{xxx(3)}px;
+    // height: 200px - 10px;
+    // height: 200px * 4;
+    height: (200px / 2);
+    // height: 200px + 200px;
     // color: $a !important;
     font-size: $b + px;
-    color: $vase;
-    @include sun;
-    @include rain(30px);
-    @include tea;
-    @include box1(30px 20px 4px plum)
+    background: #ff0 + #000;
+    // @extend .windy;
+    // @extend %www;
+    // color: $vase;
+    // @include sun;
+    // @include rain(30px);
+    // @include tea;
+    // @include box1(30px 20px 4px plum)
 }
 
 // ul {
@@ -63,6 +89,9 @@ ul {
     height: 400px;
     background: #ff0;
     list-style: none;
+
+    @extend .windy;
+    @include sun;
     li {
         $d: #00f !global;
         padding: 10px;