scss

13.sass/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 * {
   margin: 0;
   padding: 0;
@@ -6,6 +7,20 @@
   box-sizing: border-box;
 }
 
+/*
+    混合宏
+    @mixin 定义一个可以在整个样式表中重复使用的样式
+    @include 调用
+ */
+.box {
+  border: 3px solid #00f;
+  border-radius: 50px;
+  width: 500px;
+  height: 500px;
+  box-shadow: 5px 10px 10px red;
+  /* 多行注释  编译后会出现在css中 */
+}
+
 .box h1 {
   color: #ff0;
   font-size: 70px;
@@ -13,4 +28,10 @@
 
 .box ul li a {
   color: red;
+  font-size: 30px;
+  font-style: italic;
+}
+
+.box ul li a:hover {
+  color: #ff0;
 }

13.sass/index.min.css

@@ -1 +1 @@
-*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.box h1{color:#ff0;font-size:70px}.box ul li a{color:red}
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.box{border:3px solid #00f;border-radius:50px;width:500px;height:500px;box-shadow:5px 10px 10px red}.box h1{color:#ff0;font-size:70px}.box ul li a{color:red;font-size:30px;font-style:italic}.box ul li a:hover{color:#ff0}

13.sass/index.scss

@@ -4,19 +4,64 @@ $a: #ff0;
 $b: 70 !default;
 
 
+/*
+    混合宏
+    @mixin 定义一个可以在整个样式表中重复使用的样式
+    @include 调用
+ */
+@mixin aaa {
+    // border-radius: 20px;
+    border: 3px solid #00f;
+}
+
+@mixin bbb($x) {
+    border-radius: $x;
+}
+
+@mixin ccc($w:500px, $h:500px) {
+    width: $w;
+    height: $h;
+}
+
+@mixin ddd($q...) {
+    box-shadow: $q;
+}
 
 .box {
+    @include aaa;
+    @include bbb(50px);
+    @include ccc;
+    @include ddd(5px 10px 10px red);
+
     h1 {
         color: $a;
         font-size: $b + px;
         $c: red !global;
     }
 
+    // 这是一条注释 单行注释 编译后不会出现在css中
+    /* 多行注释  编译后会出现在css中 */
+    // 嵌套 选择器嵌套
     ul {
         li {
             a {
                 color: $c;
+
+                // font-size: 20px;
+                // font-style: italic;
+                // 属性嵌套
+                font: {
+                    size: 30px;
+                    style: italic;
+                }
+
+                // 伪类嵌套
+                &:hover {
+                    color: #ff0;
+                }
             }
+
         }
     }
+
 }