scss

16.scss/index.css

@@ -12,11 +12,22 @@
     .sass .scss
     sass格式会省略花括号和分号 所以常用scss存储
 */
+/*
+ 混合宏
+ @mixin 声明
+ @include 调用
+*/
 .box {
   width: 200px;
   height: 200px;
   font-size: 30px;
   border: 3px solid red;
+  border-bottom: 3px solid #ff0;
+  border-radius: 30px;
+  border-left: 3px solid #0f0;
+  border-radius: 50px;
+  border-right: 5px solid pink;
+  box-shadow: 30px 40px 13px purple;
 }
 
 h1 {
@@ -26,3 +37,23 @@ h1 {
 h2 {
   color: blue;
 }
+
+ul {
+  overflow: hidden;
+}
+
+ul li {
+  float: left;
+  margin-left: 5px;
+  border-bottom: 2px solid #f00;
+}
+
+ul li a {
+  color: #000;
+  font-size: 40px;
+  font-weight: bold;
+}
+
+ul li a:hover {
+  color: red;
+}

16.scss/index.min.css

@@ -1 +1 @@
-*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.box{width:200px;height:200px;font-size:30px;border:3px solid red}h1{color:blue}h2{color:blue}
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.box{width:200px;height:200px;font-size:30px;border:3px solid red;border-bottom:3px solid #ff0;border-radius:30px;border-left:3px solid #0f0;border-radius:50px;border-right:5px solid pink;box-shadow:30px 40px 13px purple}h1{color:blue}h2{color:blue}ul{overflow:hidden}ul li{float:left;margin-left:5px;border-bottom:2px solid #f00}ul li a{color:#000;font-size:40px;font-weight:bold}ul li a:hover{color:red}

16.scss/index.scss

@@ -11,19 +11,80 @@ $d: purple;
     .sass .scss
     sass格式会省略花括号和分号 所以常用scss存储
 */
+
+/*
+ 混合宏
+ @mixin 声明
+ @include 调用
+*/
+@mixin border {
+    // border-radius: 20px;
+    border-bottom: 3px solid #ff0;
+}
+@mixin border1($a) {
+    border-radius: $a + px;
+    border-left: 3px solid #0f0;
+}
+@mixin border2($b:50,$d:5) {
+    border-radius: $b + px;
+    border-right: $d + px solid pink;
+}
+@mixin border3($x) {
+     box-shadow: $x;
+}
 .box {
     width: 200px;
     height: 200px;
     font-size: $b + px;
     border: 3px solid $a;
+    @include border;
+    @include border1(30);
+    @include border2;
+    @include border3(30px 40px 13px purple);
 }
 
 h1 {
-    $c:blue !global;
+    $c: blue !global;
     color: $c;
 }
 
 h2 {
     // color: $a !important;
     color: $c;
-}
+}
+
+// ul {
+//     overflow: hidden;
+// }
+
+// ul li {
+//     float: left;
+//     margin-left: 5px;
+// }
+// 1.标签嵌套
+// 2.伪类嵌套
+// 3.属性嵌套
+ul {
+    overflow: hidden;
+
+    li {
+        float: left;
+        margin-left: 5px;
+        border-bottom: 2px solid #f00;
+
+        a {
+            color: #000;
+
+            // font-size: 30px;
+            // font-weight: bold;
+            font: {
+                size: 40px;
+                weight: bold;
+            }
+
+            &:hover {
+                color: red;
+            }
+        }
+    }
+}