scss

scss/index.css

@@ -5,6 +5,10 @@
   width: 500px;
   height: 500px;
   border: 2px solid #f00;
+  font-size: 30px;
+  font-weight: bold;
+  font-family: "Courier New", Courier, monospace;
+  font-style: italic;
 }
 
 .box h1 {
@@ -23,3 +27,15 @@
 .box ul li:hover {
   color: red !important;
 }
+
+.box1 {
+  width: 500px;
+  height: 500px;
+  color: red !important;
+  background: yellow;
+  font-size: 10px;
+  background: lightblue;
+  border-radius: 50%;
+  box-shadow: 10px 10px 5px yellow;
+  box-shadow: 10px 10px 10px blue;
+}

scss/index.min.css

@@ -1 +1 @@
-@import url(reset.css);.box{width:500px;height:500px;border:2px solid red}.box h1{color:purple}.box h1 span{color:red !important;font-size:15px}.box ul li{color:plum}.box ul li:hover{color:red !important}
+@import url(reset.css);.box{width:500px;height:500px;border:2px solid red;font-size:30px;font-weight:bold;font-family:"Courier New", Courier, monospace;font-style:italic}.box h1{color:purple}.box h1 span{color:red !important;font-size:15px}.box ul li{color:plum}.box ul li:hover{color:red !important}.box1{width:500px;height:500px;color:red !important;background:#ff0;font-size:10px;background:lightblue;border-radius:50%;box-shadow:10px 10px 5px #ff0;box-shadow:10px 10px 10px blue}

scss/index.scss

@@ -1,9 +1,33 @@
 // @import './reset.scss';
 @import url(reset.css);
-$a:plum;
+$a: plum;
 $cc: red !important;
 $dd: yellow !default;
 $box1: 2px solid #f00;
+@mixin vase {
+    width: 500px;
+    height: 500px;
+    color: $cc;
+    background: $dd;
+}
+@mixin a1($size) {
+    font-size: $size;
+    background: lightblue;
+}
+@mixin a2($radius:50%,$color:$dd) {
+    border-radius: $radius;
+    box-shadow: 10px 10px 5px $color;
+}
+// @mixin a2($radius:50%,$color:$dd) {
+//     border-radius: $radius;
+//     box-shadow: 10px 10px 5px $color;
+// }
+// @mixin a3($a,$b,$c,$d) {
+//     box-shadow: $a $b $c $d;
+// }
+@mixin a3($shadow...) {
+    box-shadow: $shadow;
+}
 // 单行注释 哈哈哈哈
 /*多行注释*/
 .box {
@@ -11,6 +35,12 @@ $box1: 2px solid #f00;
     height: 500px;
     border: $box1;
     $bb: purple !global;
+    font: {
+        size: 30px;
+        weight: bold;
+        family: "Courier New", Courier, monospace;
+        style: italic;
+    }
     h1 {
         // color: $cc;
         // color: $dd;
@@ -29,4 +59,11 @@ $box1: 2px solid #f00;
         }
     }
 }
-// ul li:hover
+.box1 {
+    @include vase;
+    @include a1(10px);
+    @include a2;
+    @include a3(10px 10px 10px blue);
+}
+// ul li:hover
+// img[alt='www'] {}