scss

scss/4.3晚课/index.css

@@ -40,6 +40,15 @@
   color: #00f;
 }
 
+.box h3 {
+  width: 210px;
+  height: 200px;
+  border: 1px solid #fff;
+  color: yellow;
+  color: blue;
+  color: white;
+}
+
 .main {
   color: #ff0;
 }

scss/4.3晚课/index.min.css

@@ -1 +1 @@
-.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}
+.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}.box h3{width:210px;height:200px;border:1px solid #fff;color:#ff0;color:blue;color:#fff}.main{color:#ff0}

scss/4.3晚课/index.scss

@@ -30,6 +30,11 @@ $box1:30px !global;
 %vase2 {
     color: #fff;
 }
+// 自定义函数
+@function getMain($aa) {
+    @return ($aa + 5) * 2;
+}
+
 .box {
     width: 800px;
     height: 800px;
@@ -56,6 +61,13 @@ $box1:30px !global;
         // box-shadow: 20px 15px 25px #ff0;
     }
     h3 {
+        width: #{getMain(100)}px;
+        height: (400/2)+px;
+        border: 1px solid #fff;
+        // color: #0f0 + #00f;
+        color: #f00 + #ff0;
+        color: #00f + #000;
+        color: #fff + #000;
         // @extend .vase1;
         &:hover {
             @extend %vase2;