scss

17.scss/index.css

@@ -1,11 +1,42 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+body, html {
+  font-size: 30px;
+}
+
+/* 你好 */
 h1 {
   color: #f00 !important;
   font-size: 50px;
-  color: #ff0;
+}
+
+ul {
+  width: 400px;
+  height: 400px;
+  background: #ff0;
+  list-style: none;
 }
 
 ul li {
+  padding: 10px;
+}
+
+ul li a {
+  text-decoration: none;
   color: #00f;
+  font-size: 40px;
+  font-weight: bold;
+}
+
+ul li a:hover {
+  color: #f00;
 }
 
 p {

17.scss/index.html

@@ -10,9 +10,9 @@
     <div>
         <h1>你好</h1>
         <ul>
-            <li>你好1</li>
-            <li>你好2</li>
-            <li>你好3</li>
+            <li><a href="">你好1</a></li>
+            <li><a href="">你好2</a></li>
+            <li><a href="">你好3</a></li>
         </ul>
         <p>哈哈哈哈哈</p>
     </div>

17.scss/index.min.css

@@ -1 +1 @@
-h1{color:red !important;font-size:50px;color:#ff0}ul li{color:blue}p{color:blue}
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}body,html{font-size:30px}h1{color:red !important;font-size:50px}ul{width:400px;height:400px;background:#ff0;list-style:none}ul li{padding:10px}ul li a{text-decoration:none;color:#00f;font-size:40px;font-weight:bold}ul li a:hover{color:red}p{color:blue}

17.scss/index.scss

@@ -1,16 +1,58 @@
+// @import url(reset.css);
+@import "./reset.scss";
 // 变量
+/* 你好 */
 $a: #f00;
 $b: 50;
 $c: #ff0 !default;
+
 h1 {
     color: $a !important;
     font-size: $b + px;
-    color: $c;
+    // color: $vase;
 }
 
-ul li {
-    $d:#00f !global;
-    color: $d;
+// ul {
+//     width: 400px;
+//     height: 400px;
+//     background: #ff0;
+//     list-style: none;
+// }
+// ul li {
+//     $d:#00f !global;
+//     padding: 10px;
+// }
+// ul li a{
+//     text-decoration: none;
+//     color: #00f;
+//     font-size: 30px;
+// }
+// ul li a:hover {
+//     color: $a;
+// }
+
+ul {
+    width: 400px;
+    height: 400px;
+    background: #ff0;
+    list-style: none;
+    li {
+        $d: #00f !global;
+        padding: 10px;
+        a {
+            text-decoration: none;
+            color: #00f;
+            // font-size: 30px;
+            // font-weight: bold;
+            font: {
+                size: 40px;
+                weight:bold
+            }
+            &:hover {
+                color: $a;
+            }
+        }
+    }
 }
 
 p {

17.scss/reset.css

@@ -0,0 +1,11 @@
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+body, html {
+  font-size: 30px;
+}

17.scss/reset.min.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}body,html{font-size:30px}

17.scss/reset.scss

@@ -0,0 +1,13 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    box-sizing: border-box;
+}
+
+body,html {
+    font-size: 30px;
+}
+
+$vase: plum;