scss

17.scss/index.css

@@ -13,8 +13,15 @@ body, html {
 
 /* 你好 */
 h1 {
-  color: #f00 !important;
   font-size: 50px;
+  color: plum;
+  width: 200px;
+  height: 300px;
+  margin: 10px;
+  border: 3px solid #00f;
+  border-radius: 30px;
+  background: #f00;
+  box-shadow: 30px 20px 4px plum;
 }
 
 ul {
@@ -39,6 +46,11 @@ ul li a:hover {
   color: #f00;
 }
 
+/*
+    混合宏
+    @mixin 允许定义一个可以再整个样式表复制的样式
+    @include 可以将mixin混入到整个样式表中
+*/
 p {
   color: #00f;
 }

17.scss/index.min.css

@@ -1 +1 @@
-*{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}
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}body,html{font-size:30px}h1{font-size:50px;color:plum;width:200px;height:300px;margin:10px;border:3px solid #00f;border-radius:30px;background:red;box-shadow:30px 20px 4px plum}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

@@ -5,11 +5,38 @@
 $a: #f00;
 $b: 50;
 $c: #ff0 !default;
+@mixin sun {
+    width: 200px;
+    height: 300px;
+    margin: 10px;
+    // border-radius: 20px;
+    border: 3px solid #00f;
+    // box-shadow: 30px 20px 4px #f00;
+}
+@mixin rain($x) {
+    border-radius: $x;
+}
 
+@mixin tea($x:$a) {
+    background:$x;
+}
+@mixin box1($x...) {
+    box-shadow: $x;
+    // box-shadow: $x $q $w $r;
+    // @if length($x) >= 3 {
+    //     box-shadow: $x;
+    // } @else {
+    //     box-shadow: 30px 20px 4px plum;
+    // }
+}
 h1 {
-    color: $a !important;
+    // color: $a !important;
     font-size: $b + px;
-    // color: $vase;
+    color: $vase;
+    @include sun;
+    @include rain(30px);
+    @include tea;
+    @include box1(30px 20px 4px plum)
 }
 
 // ul {
@@ -54,7 +81,11 @@ ul {
         }
     }
 }
-
+/*
+    混合宏
+    @mixin 允许定义一个可以再整个样式表复制的样式
+    @include 可以将mixin混入到整个样式表中
+*/
 p {
     color: $d;
 }