scss

scss/4.3晚课/index.css

@@ -3,9 +3,17 @@
   border: 10px dotted #00f;
 }
 
+.vase1 {
+  cursor: pointer;
+}
+
+.box h3:hover {
+  color: #fff;
+}
+
 .box {
-  width: 200px;
-  height: 200px;
+  width: 800px;
+  height: 800px;
   background: #f00;
   color: #ff0;
   font-size: 25px;
@@ -14,6 +22,18 @@
 
 .box a {
   color: #ff0;
+  width: 300px;
+  height: 300px;
+  border: 1px solid #00f;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #0f0;
+  font-size: 24px;
+  border-radius: 20px;
+  font-size: 40px;
+  background: plum;
+  box-shadow: 20px 15px 25px #0f0;
 }
 
 .box a:hover {

scss/4.3晚课/index.html

@@ -12,6 +12,7 @@
             这是一个盒子
         </div>
         <a href="">来来来</a>
+        <h3>新的标签</h3>
     </div>
     <div class="main">
         内容

scss/4.3晚课/index.min.css

@@ -1 +1 @@
-.box{border:10px dotted #00f}.box{width:200px;height:200px;background:#f00;color:#ff0;font-size:25px;font-weight:200}.box a{color:#ff0}.box a:hover{color:#00f}.main{color:#ff0}
+.box{border:10px dotted #00f}.vase1{cursor:pointer}.box h3:hover{color:#fff}.box{width:800px;height:800px;background:#f00;color:#ff0;font-size:25px;font-weight:200}.box a{color:#ff0;width:300px;height:300px;border:1px solid #00f;display:flex;justify-content:center;align-items:center;color:#0f0;font-size:24px;border-radius:20px;font-size:40px;background:plum;box-shadow:20px 15px 25px lime}.box a:hover{color:#00f}.main{color:#ff0}

scss/4.3晚课/index.scss

@@ -3,9 +3,36 @@
 $aa:#ff0;
 $box: 50px !default;
 $box1:30px !global;
+@mixin part1 {
+    width: 300px;
+    height: 300px;
+    border: 1px solid #00f;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #0f0;
+    font-size: 24px;
+}
+@mixin part2($aa) {
+    border-radius: $aa;
+}
+// 基类
+@mixin part3($bb:40px,$cc:plum) {
+    font-size: $bb;
+    background: $cc;
+}
+@mixin part4($aa...) {
+    box-shadow: $aa;
+}
+.vase1 {
+    cursor: pointer;//鼠标变小手
+}
+%vase2 {
+    color: #fff;
+}
 .box {
-    width: 200px;
-    height: 200px;
+    width: 800px;
+    height: 800px;
     background: #f00;
     color: $aa;
     $bb: #0f0;
@@ -22,6 +49,17 @@ $box1:30px !global;
         &:hover {
             color: #00f;
         }
+        @include part1;
+        @include part2(20px);
+        @include part3;
+        @include part4(20px 15px 25px #0f0)
+        // box-shadow: 20px 15px 25px #ff0;
+    }
+    h3 {
+        // @extend .vase1;
+        &:hover {
+            @extend %vase2;
+        }
     }
 }
 .main {