1 hari lalu · 9ba21932ef
--- a/21.scss/demo.css
+++ b/21.scss/demo.css
@@ -0,0 +1,3 @@
 
				+h3 {
			
 
				+  color: pink;
			
 
				+}
			
--- a/21.scss/demo.min.css
+++ b/21.scss/demo.min.css
@@ -0,0 +1 @@
 
				+h3{color:pink}
			
--- a/21.scss/demo.scss
+++ b/21.scss/demo.scss
@@ -0,0 +1,3 @@
 
				+h3 {
			
 
				+    color: pink;
			
 
				+}
			
--- a/21.scss/index.css
+++ b/21.scss/index.css
@@ -1,11 +1,31 @@
 
				+h3 {
			
 
				+  color: pink;
			
 
				+}
			
 
				+
			
 
				 /*
			
 
				     var aa = xxx1;
			
 
				 */
			
 
				 .box {
			
 
				   border: 2px solid #f00;
			
 
				+  width: 500px;
			
 
				+  height: 500px;
			
 
				+  border-radius: 20px;
			
 
				+  box-shadow: 10px 50px 15px yellow;
			
 
				 }
			
 
				 
			
 
				-h1 {
			
 
				+.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;
			
 
				 }
			
--- a/21.scss/index.html
+++ b/21.scss/index.html
@@ -9,6 +9,12 @@
 
				 <body>
			
 
				     <div class="box">
			
 
				         <h1>我是有关Scss的内容</h1>
			
 
				+        <h3>哈哈哈哈</h3>
			
 
				+        <ul>
			
 
				+            <li>你好1</li>
			
 
				+            <li>你好2</li>
			
 
				+            <li>你好3</li>
			
 
				+        </ul>
			
 
				     </div>
			
 
				 </body>
			
 
				 </html>
			
--- a/21.scss/index.min.css
+++ b/21.scss/index.min.css
@@ -1 +1 @@
 
				-.box{border:2px solid red}h1{color:skyblue;color:red}
			
 
				+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}
			
--- a/21.scss/index.scss
+++ b/21.scss/index.scss
@@ -1,18 +1,54 @@
 
				-$a:purple;
			
 
				+$a: purple;
			
 
				 $b: skyblue !default;
			
 
				-$c:2px solid #f00;
			
 
				+$c: 2px solid #f00;
			
 
				+// @import url(demo.css);
			
 
				+@import "./demo.scss";
			
 
				+@mixin sun {
			
 
				+    width: 500px;
			
 
				+    height: 500px;
			
 
				+}
			
 
				 // var aa = xxx;
			
 
				 /*
			
 
				     var aa = xxx1;
			
 
				 */
			
 
				+@mixin rain($f) {
			
 
				+    font-size: $f;
			
 
				+}
			
 
				+@mixin snow($g:20px) {
			
 
				+    border-radius: $g;
			
 
				+}
			
 
				+// @mixin cloudy($h,$i,$j,$k) {
			
 
				+//     box-shadow: $h $i $j $k;
			
 
				+// }
			
 
				+@mixin cloudy($h...) {
			
 
				+    box-shadow: $h;
			
 
				+}
			
 
				 .box {
			
 
				     border: $c;
			
 
				     $d: red !global;
			
 
				-}
			
 
				-
			
 
				-
			
 
				-h1 {
			
 
				-    // color: $a !important;
			
 
				-    color: $b;
			
 
				-    color: $d;
			
 
				+    @include sun;
			
 
				+    @include snow();
			
 
				+    @include cloudy(10px 50px 15px yellow);
			
 
				+    h1 {
			
 
				+        // color: $a !important;
			
 
				+        color: $b;
			
 
				+        color: $d;
			
 
				+        // font-size: 50px;
			
 
				+        // font-style: italic;
			
 
				+        // font-weight: 300;
			
 
				+        font: {
			
 
				+            size: 50px;
			
 
				+            style: italic;
			
 
				+            weight: 300;
			
 
				+        }
			
 
				+    }
			
 
				+    ul {
			
 
				+        li {
			
 
				+            color: $d;
			
 
				+            @include rain(20px);
			
 
				+            &:hover {
			
 
				+                color: $a;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				 }
			
--- a/21.scss/归纳.md
+++ b/21.scss/归纳.md
@@ -27,3 +27,34 @@ $后跟进变量名 用:进行赋值
 
				 $box:50px !default;表示默认变量 
			
 
				 特点：优先级较低
			
 
				 !global 全局
			
 
				+
			
 
				+## 在sass中嵌入其他scss文件
			
 
				+@import url(reset.css)
			
 
				+@import “路径.scss”
			
 
				+
			
 
				+## 嵌套
			
 
				+1.选择器的嵌套
			
 
				+2.属性嵌套
			
 
				+3.伪类嵌套
			
 
				+     “&”表示查找当前元素以及当前元素的祖先元素
			
 
				+
			
 
				+
			
 
				+## 混合宏
			
 
				+@mixin 指令允许我们定义一个可以在整个样式表重复使用的样式；
			
 
				+@include 指令可以将混入(mixin)引入当文档中；
			
 
				+@mixin 混合宏名称(参数) {复用代码}
			
 
				+@mixin 声明混合宏 （类似于函数声明）
			
 
				+@include 调用混合宏 （类似于函数调用）
			
 
				+缺点：产生冗长的代码块
			
 
				+变量存在作用域的问题：全局变量和局部变量
			
 
				+传参()的变量都是局部变量
			
 
				+多个局部变量用逗号（英文）隔开，变量可以赋值也可以不赋值
			
 
				+
			
 
				+
			
 
				+### 不带参数
			
 
				+    @mixin是用来声明混合宏的关键词，类似css中的@media、@font-face一样。
			
 
				+### 带参数
			
 
				+    1.带参数不带值
			
 
				+    2.带参数带值
			
 
				+
			
 
				+    a.单个值  b.多个值