scss

16.scss/index.css

@@ -17,17 +17,42 @@
  @mixin 声明
  @include 调用
 */
+/*
+    继承
+    声明方式：已存在的基类
+    .class{}/.xxx{}
+    调用：@extend
+*/
+.vase {
+  font-size: 20px;
+  color: purple;
+}
+
+/*
+  占位符
+  %placeholder
+  声明：%xxxx
+  调用：@extend 
+*/
+/*
+    函数：
+    @function 函数名（形参） { @return xx }  
+    函数名（实参）px
+*/
+/*
+    操作符：
+    +:前后单位必须统一
+    -:前后需要空格
+    *:只允许一个数值带单位
+    /:在括号中进行运算 后面拼接单位
+    颜色：颜色值分段运算
+*/
 .box {
-  width: 200px;
-  height: 200px;
+  width: 600px;
+  height: 400px;
   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;
+  background: yellow;
 }
 
 h1 {

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;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}
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.vase{font-size:20px;color:purple}.box{width:600px;height:400px;font-size:30px;border:3px solid red;background:#ff0}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

@@ -21,26 +21,74 @@ $d: purple;
     // 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) {
+
+@mixin border2($b: 50, $d: 5) {
     border-radius: $b + px;
     border-right: $d + px solid pink;
 }
+
 @mixin border3($x) {
-     box-shadow: $x;
+    box-shadow: $x;
+}
+
+/*
+    继承
+    声明方式：已存在的基类
+    .class{}/.xxx{}
+    调用：@extend
+*/
+.vase {
+    font-size: 20px;
+    color: purple;
 }
+
+/*
+  占位符
+  %placeholder
+  声明：%xxxx
+  调用：@extend 
+*/
+%ppp {
+    color: #0f0;
+}
+
+/*
+    函数：
+    @function 函数名（形参） { @return xx }  
+    #{函数名（实参）}px
+*/
+@function getNumber($aa) {
+    @return $aa * 2;
+}
+
+/*
+    操作符：
+    +:前后单位必须统一
+    -:前后需要空格
+    *:只允许一个数值带单位
+    /:在括号中进行运算 后面拼接单位
+    颜色：颜色值分段运算
+*/
 .box {
-    width: 200px;
-    height: 200px;
+    width: #{getNumber(300)}px;
+    height: (800 / 2) + px;
     font-size: $b + px;
     border: 3px solid $a;
-    @include border;
-    @include border1(30);
-    @include border2;
-    @include border3(30px 40px 13px purple);
+    background: #f00 + #ff0;
+    // f00
+    // ff0
+    // ff0
+    // @extend .vase;
+    // @extend %ppp;
+    // @include border;
+    // @include border1(30);
+    // @include border2;
+    // @include border3(30px 40px 13px purple);
 }
 
 h1 {
@@ -87,4 +135,4 @@ ul {
             }
         }
     }
-}
+}