scss

scss/index.css

@@ -9,6 +9,14 @@
 
 .box {
   color: #f00;
+  background-color: #f00;
+}
+
+.part4 {
+  cursor: pointer;
+  width: 100px;
+  height: 100px;
+  background: plum;
 }
 
 .box {
@@ -16,8 +24,11 @@
   height: 800px;
   border: 1px solid #000;
   background-color: #ff0;
-  font-size: 50px;
-  font-size: 20px;
+  border-radius: 20px;
+  border: 3px double #00f;
+  box-shadow: 30px 35px 15px #f0f;
+  font-size: 25px;
+  font-weight: 600;
 }
 
 .box h1 {
@@ -40,6 +51,14 @@
   color: #f00;
 }
 
+.box h2, .box h3, .box h4, .box h5, .box h6 {
+  width: 200px;
+  height: 300px;
+  background-color: yellow;
+  background-color: white;
+  margin-top: 20px;
+}
+
 /*
     哈哈哈哈
 */

scss/index.html

@@ -12,6 +12,11 @@
         <div class="main">
             哇哦
         </div>
+        <h2>标题2</h2>
+        <h3>标题3</h3>
+        <h4>标题4</h4>
+        <h5>标题5</h5>
+        <h6>标题6</h6>
     </div>
 </body>
 </html>

scss/index.min.css

@@ -1 +1 @@
-*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.box{color:red}.box{width:800px;height:800px;border:1px solid #000;background-color:#ff0;font-size:50px;font-size:20px}.box h1{font-size:20px;color:red}.box .main{border:1px solid #f00;color:purple;width:200px;height:100px;display:flex;justify-content:center;align-items:center;color:#00f}.box .main:hover{color:#f00}
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.box{color:red;background-color:red}.part4{cursor:pointer;width:100px;height:100px;background:plum}.box{width:800px;height:800px;border:1px solid #000;background-color:#ff0;border-radius:20px;border:3px double blue;box-shadow:30px 35px 15px #f0f;font-size:25px;font-weight:600}.box h1{font-size:20px;color:red}.box .main{border:1px solid #f00;color:purple;width:200px;height:100px;display:flex;justify-content:center;align-items:center;color:#00f}.box .main:hover{color:#f00}.box h2,.box h3,.box h4,.box h5,.box h6{width:200px;height:300px;background-color:#ff0;background-color:#fff;margin-top:20px}

scss/index.scss

@@ -13,16 +13,54 @@ $box1:20px !global;
     justify-content: center;
     align-items: center;
 }
+@mixin part6($aa,$bb,$cc) {
+    width: $aa;
+    height: $bb;
+    background-color: $cc;
+
+}
+@mixin part1($a1) {
+    border-radius: $a1;
+}
+@mixin part2($a1:20px,$a2:double) {
+    border-radius: $a1;
+    border: 3px $a2 #00f;
+}
+@mixin part3($aaa...) {
+    box-shadow: $aaa;
+}
+.part4{
+    cursor: pointer; //鼠标变小手
+    width: 100px;
+    height: 100px;
+    background: plum;
+}
+%part5 {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 3px dotted #0f0;
+}
+@function part7($a) {
+    @return $a * 2;
+}
+
 .box {
     width: 800px;
     height: 800px;
     border: 1px solid #000;
     background-color: $aa;
-    font-size: $box;
-    font-size: $box1;
+    // @include part1(10px);
+    @include part2();
+    @include part3(30px 35px 15px #f0f);
+    font: {
+      size: 25px;
+      weight: 600;
+    }
     h1 {
         font-size: $box1;
         color: red;
+        // @extend .part4;
     }
     .main {
         @include vase;
@@ -31,6 +69,17 @@ $box1:20px !global;
             color: #f00;
         }
     }
+    h2,h3,h4,h5,h6 {
+        // @extend .part4;
+        // @extend %part5;
+        // @include part6(100px,200px,#0ff)
+        // #{函数名(变量值)}px
+        width: (400/2) + px;
+        height: #{part7(150)}px;
+        background-color: #ff0+#0f0; // #ff0
+        background-color: #f00+#fff; // #fff
+        margin-top: 20px;
+    }
 }
 // .main::after {
 //     content: '放假了';