fix:scss

18.scss/index.css

@@ -1,5 +1,15 @@
 @charset "UTF-8";
 @import url("./reset.css");
+.tea, h1 {
+  color: aqua;
+  font-weight: lighter;
+  font-style: italic;
+}
+
+ul li:last-child {
+  color: #ff0;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -34,3 +44,13 @@ ul li:hover {
 ul li:nth-child(2):hover {
   color: #f00;
 }
+
+ul li:nth-child(3) {
+  width: 300px;
+  height: 300px;
+  color: blue;
+  background-color: yellow;
+  border: 3px solid plum;
+  box-shadow: 30px 20px 10px #f00;
+  font-size: 10px;
+}

18.scss/index.min.css

@@ -1 +1 @@
-@import url("./reset.css");*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}h1{color:#f00}ul{width:700px;height:700px;border:10px dashed lime}ul li{color:purple;font-size:30px;font-weight:bold}ul li:hover{color:#ff0}ul li:nth-child(2):hover{color:#f00}
+@import url("./reset.css");.tea,h1{color:aqua;font-weight:lighter;font-style:italic}ul li:last-child{color:#ff0}*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}h1{color:#f00}ul{width:700px;height:700px;border:10px dashed lime}ul li{color:purple;font-size:30px;font-weight:bold}ul li:hover{color:#ff0}ul li:nth-child(2):hover{color:#f00}ul li:nth-child(3){width:300px;height:300px;color:blue;background-color:#ff0;border:3px solid plum;box-shadow:30px 20px 10px red;font-size:10px}

18.scss/index.scss

@@ -2,6 +2,31 @@ $aa: #0f0;
 // var aa = 
 $box1: 3px !default;
 // @import './reset.scss';
+@mixin flower($xx,$yy) {
+    width: 300px;
+    height: 300px;
+    color: $xx;
+    background-color: $yy;
+    border: 3px solid plum;
+}
+@mixin vase($cc...) {
+    box-shadow: $cc;
+}
+@mixin water($dd:10px) {
+    font-size: $dd
+}
+.tea {
+    color: aqua;
+    // font-style: italic;
+    // font-weight: lighter;
+    font: {
+        weight: lighter;
+        style: italic;
+    }
+}
+%sun {
+    color: #ff0
+}
 @import url('./reset.css');
 * {
     margin: 0;
@@ -10,7 +35,7 @@ $box1: 3px !default;
     text-decoration: none;
     box-sizing: border-box;
 }
- 
+
 // 这是标题的标签
 /*
     今天天气真好
@@ -18,6 +43,7 @@ $box1: 3px !default;
 h1 {
     color: #f00;
     $box2: 10px !global;
+    @extend .tea;
 }
 
 ul {
@@ -36,5 +62,13 @@ ul {
         &:nth-child(2):hover {
             color: #f00;
         }
+        &:nth-child(3) {
+            @include flower(blue,yellow);
+            @include vase(30px 20px 10px #f00);
+            @include water();
+        }
+        &:last-child {
+            @extend %sun;
+        }
     }
 }