scss

21.scss/index.css

@@ -5,6 +5,10 @@ h3 {
 /*
     var aa = xxx1;
 */
+.happy {
+  cursor: pointer;
+}
+
 .box {
   border: 2px solid #f00;
   width: 500px;
@@ -16,11 +20,17 @@ h3 {
 .box h1 {
   color: skyblue;
   color: red;
-  font-size: 50px;
+  font-size: 24px;
   font-style: italic;
   font-weight: 300;
 }
 
+.box ul {
+  width: 250px;
+  background-color: yellow;
+  border: 2px solid #f00;
+}
+
 .box ul li {
   color: red;
   font-size: 20px;

21.scss/index.min.css

@@ -1 +1 @@
-h3{color:pink}.box{border:2px solid red;width:500px;height:500px;border-radius:20px;box-shadow:10px 50px 15px yellow}.box h1{color:skyblue;color:red;font-size:50px;font-style:italic;font-weight:300}.box ul li{color:red;font-size:20px}.box ul li:hover{color:purple}
+h3{color:pink}.happy{cursor:pointer}.box{border:2px solid red;width:500px;height:500px;border-radius:20px;box-shadow:10px 50px 15px yellow}.box h1{color:skyblue;color:red;font-size:24px;font-style:italic;font-weight:300}.box ul{width:250px;background-color:#ff0;border:2px solid red}.box ul li{color:red;font-size:20px}.box ul li:hover{color:purple}

21.scss/index.scss

@@ -23,6 +23,15 @@ $c: 2px solid #f00;
 @mixin cloudy($h...) {
     box-shadow: $h;
 }
+%hi {
+    font-size: 30px;
+}
+.happy {
+    cursor: pointer;
+}
+@function flower($x) {
+    @return $x * 2;
+}
 .box {
     border: $c;
     $d: red !global;
@@ -37,17 +46,22 @@ $c: 2px solid #f00;
         // font-style: italic;
         // font-weight: 300;
         font: {
-            size: 50px;
+            size: #{flower(12)}px;
             style: italic;
             weight: 300;
         }
     }
     ul {
+        width: (1000px/4);
+        background-color:#f00 + #0f0;
+        border: $c;
         li {
             color: $d;
+            // @extend .happy;
             @include rain(20px);
             &:hover {
                 color: $a;
+                // @extend %hi;
             }
         }
     }

21.scss/归纳.md

@@ -58,3 +58,53 @@ $box:50px !default;表示默认变量
     2.带参数带值
 
     a.单个值  b.多个值
+
+
+## 继承
+在sass中继承类中的样式代码块；
+通过关键字@extend来继承样式所以样式代码，而且编译出来的css会将选择器合并在一起，形成群组选择器；
+基类：已存在的样式块；
+声明方式：.class(如:.titleBar)
+调用方式: @extend
+
+## 占位符
+%placeholder  简写 %
+可以取代css中的基类造成的代码冗余的情形；
+因为%placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码；
+
+## 函数
+自定义函数:
+要实现函数声明和返回内容需要使用function和return两个指令。 
+@function 函数名(形参) {
+    @return;
+}
+#{函数名(变量值)}px
+
+## 操作符
+加法：需要单位统一
+减法：减法前后加空格，不可直接连接减法运算
+乘法：只允许一个数值带有单位
+除法：需要在运算外添加一个小括号
+颜色运算：支持颜色值，分段运算
+
+
+
+# 总结
+1. 混合宏
+声明方式:@mixin 调用方式:@include
+编译出来的css显示，它不会自动合并相同的样式代码
+缺点:造成代码冗余
+使用场景:代码块中涉及到变量，建议使用混合宏来创建相同的代码块
+
+2. 继承
+声明方式:class 调用方式:@extend；
+使用后，编译出来的css代码块合并到一起，通过群组选择器的方式向大家展现；
+这样编译出来的代码相对于混合宏来说要干净的多，但他不能传变量参数；
+使用场景:如果你的代码块不需要传任何变量参数，而且有一个基类已在文件中存在，建议使用继承；
+
+3. 占位符
+声明方式%placeholder （%） 调用方式:@extend
+占位符和继承的主要区别：
+1.占位符是独立存在，不调用的时候是不会再CSS中产生任何代码；
+2.继承是首先有一个基类存在，不管调用不调用，基类的样式都将会出现在编译出来的css代码中；
+