scss

scss/index.css

@@ -5,6 +5,13 @@
   border: 3px solid #f00;
 }
 
+.sun {
+  width: 30px;
+  height: 30px;
+  border-radius: 20px;
+  border: 1px solid #00f;
+}
+
 h1 {
   color: #f00;
   font-size: 40px;
@@ -14,6 +21,14 @@ h1 {
 p {
   color: #f00;
   font-weight: 800;
+  width: 200px;
+  height: 100px;
+  border: 2px solid #0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-shadow: 10px 20px 10px aqua;
 }
 
 .main ul {

scss/index.min.css

@@ -1 +1 @@
-.box{width:400px;height:400px;border:3px solid #f00}h1{color:red;font-size:40px;font-weight:lighter}p{color:red;font-weight:800}.main ul{list-style:none}.main ul li:first-child a{color:#ff0}.main ul li a{text-decoration:none;font-size:25px;font-weight:bold}.main ul li a:hover{color:red}
+.box{width:400px;height:400px;border:3px solid #f00}.sun{width:30px;height:30px;border-radius:20px;border:1px solid #00f}h1{color:red;font-size:40px;font-weight:lighter}p{color:red;font-weight:800;width:200px;height:100px;border:2px solid #0f0;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:10px 20px 10px aqua}.main ul{list-style:none}.main ul li:first-child a{color:#ff0}.main ul li a{text-decoration:none;font-size:25px;font-weight:bold}.main ul li a:hover{color:red}

scss/index.scss

@@ -2,42 +2,90 @@
 /*sasa*/
 // @import url(rest.css);
 @import './rest.scss';
+
+@mixin flower {
+    width: 200px;
+    height: 100px;
+    border: 2px solid #0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin news1($x) {
+    border-radius: $x;
+}
+
+// @mixin news2($a:10px,$b:10px,$c:10px,$d:purple) {
+//     box-shadow: $a $b $c $d;
+// }
+@mixin news2($aaa...) {
+    box-shadow: $aaa;
+}
+
+.sun {
+    width: 30px;
+    height: 30px;
+    border-radius: 20px;
+    border: 1px solid #00f;
+}
+%rain {
+    width: 30px;
+    height: 30px;
+    border-radius: 20px;
+    border: 1px solid #0ff;
+}
+
 $aa: #f00;
 $bb: 40;
-$cc:lighter !default;
+$cc: lighter !default;
+
 h1 {
     color: $aa;
     font-size: $bb + px;
     font-weight: $cc;
-    $ab:800 !global;
+    $ab: 800 !global;
 }
+
 p {
     color: $aa;
     font-weight: $ab;
+    @include flower;
+    @include news1(50%);
+    @include news2(10px 20px 10px aqua);
 }
+
 .main {
     ul {
         list-style: none;
+
         li {
             &:first-child a {
                 color: #ff0;
+                // @extend .sun;
+                // @extend %rain;
             }
+
             a {
                 text-decoration: none;
+
                 // font-size: 30px;
                 // font-weight: bold;
                 font: {
                     size: 25px;
                     weight: bold;
                 }
+
                 &:hover {
                     color: $aa;
                 }
             }
+
             // a:hover {}
         }
     }
 }
+
 // ul li:first-child a {
 //     color: #ff0;
 // }