scss

scss/index.css

@@ -1,5 +1,11 @@
 @charset "UTF-8";
 @import url(reset.css);
+.happy, .con {
+  width: 1000xp;
+  height: 800px;
+  border: 4px solid pink;
+}
+
 /*多行注释*/
 .box {
   width: 500px;

scss/index.min.css

@@ -1 +1 @@
-@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}
+@import url(reset.css);.happy,.con{width:1000xp;height:800px;border:4px solid pink}.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

@@ -14,7 +14,7 @@ $box1: 2px solid #f00;
     font-size: $size;
     background: lightblue;
 }
-@mixin a2($radius:50%,$color:$dd) {
+@mixin a2($radius: 50%, $color: $dd) {
     border-radius: $radius;
     box-shadow: 10px 10px 5px $color;
 }
@@ -28,6 +28,21 @@ $box1: 2px solid #f00;
 @mixin a3($shadow...) {
     box-shadow: $shadow;
 }
+.happy {
+    width: 1000xp;
+    height: 800px;
+    border: 4px solid pink;
+}
+%hi {
+    width: 800px;
+    height: 800px;
+    background: #ccc;
+    margin: 0 auto;
+}
+.con {
+    // @extend %hi;
+    @extend .happy;
+}
 // 单行注释 哈哈哈哈
 /*多行注释*/
 .box {
@@ -64,6 +79,7 @@ $box1: 2px solid #f00;
     @include a1(10px);
     @include a2;
     @include a3(10px 10px 10px blue);
+    // @extend .happy;
 }
 // ul li:hover
-// img[alt='www'] {}
+// img[alt='www'] {}