new

12_sass/list.css

@@ -81,3 +81,82 @@ div2 {
   color: #000000;
   background: #ff0000;
 }
+
+.wrapper, .wrapper .inner, #main {
+  width: 100px;
+  height: 30px;
+  font-size: 10px;
+}
+
+.wrapper .inner, #main .inner {
+  padding: 20px;
+}
+
+.wrapper .inner p, #main .inner p {
+  color: #ff0000;
+}
+
+#main {
+  margin: 10px;
+}
+
+.content {
+  width: 30%;
+}
+
+.last {
+  width: 8;
+}
+
+div {
+  width: 80px;
+  border-top: 1px solid #000;
+}
+
+section {
+  border-bottom: 1px solid #000;
+}
+
+p {
+  color: blue;
+}
+
+li {
+  font-size: 12px;
+}
+
+.list-1 {
+  width: 100px;
+}
+
+.list-2 {
+  width: 200px;
+}
+
+.list-3 {
+  width: 300px;
+}
+
+.none-1 {
+  width: 100px;
+}
+
+.none-2 {
+  width: 200px;
+}
+
+.content-red {
+  color: red;
+}
+
+.content-blue {
+  color: blue;
+}
+
+.content-pink {
+  color: pink;
+}
+
+.content-green {
+  color: green;
+}

12_sass/list.min.css

@@ -1 +1 @@
-/*! sass有作用域 */div{width:100px;height:100px;background:red;color:red}div2{width:200px;height:200px;background:red}#list{width:100px;height:100px}#list li{font-size:12px}#list li p{padding-top:20px;padding-left:40px}#list-inner{color:red}.link{color:red}.link:hover{color:#ccc}.login-btn{width:100px;height:40px;line-height:40px;text-align:center;border-radius:5px;color:#000;background:red}.submit-btn{width:50px;height:30px;line-height:100px;text-align:center;border-radius:5px;color:#000;background:red}.del-btn{width:200px;height:100px;line-height:100px;text-align:center;border-radius:5px;color:#000;background:red}
+/*! sass有作用域 */div{width:100px;height:100px;background:red;color:red}div2{width:200px;height:200px;background:red}#list{width:100px;height:100px}#list li{font-size:12px}#list li p{padding-top:20px;padding-left:40px}#list-inner{color:red}.link{color:red}.link:hover{color:#ccc}.login-btn{width:100px;height:40px;line-height:40px;text-align:center;border-radius:5px;color:#000;background:red}.submit-btn{width:50px;height:30px;line-height:100px;text-align:center;border-radius:5px;color:#000;background:red}.del-btn{width:200px;height:100px;line-height:100px;text-align:center;border-radius:5px;color:#000;background:red}.wrapper,.wrapper .inner,#main{width:100px;height:30px;font-size:10px}.wrapper .inner,#main .inner{padding:20px}.wrapper .inner p,#main .inner p{color:red}#main{margin:10px}.content{width:30%}.last{width:8}div{width:80px;border-top:1px solid #000}section{border-bottom:1px solid #000}p{color:blue}li{font-size:12px}.list-1{width:100px}.list-2{width:200px}.list-3{width:300px}.none-1{width:100px}.none-2{width:200px}.content-red{color:red}.content-blue{color:blue}.content-pink{color:pink}.content-green{color:green}

12_sass/list.scss

@@ -1,3 +1,4 @@
+// @import 'max.scss';
 $bgcolor: #ff0000;
 $keyName: 'color';
 $whiteColor: #000000;
@@ -96,4 +97,105 @@ div2{
 }
 .del-btn{
   @include logo-btn()
-}
+}
+
+.wrapper {
+  width: 100px;
+  height: 30px;
+  font-size: 10px;
+  .inner{
+    //@extend  继承某一个选择器的样式
+    //如果继承的选择器 有子选择器 会一并继承过来
+    //编译的时候 会将相同的样式 转化成分组选择器
+    @extend .wrapper;
+    padding: 20px;
+    p{
+      color: $bgcolor;
+    }
+  }
+}
+
+#main{
+  @extend .wrapper;
+  margin: 10px
+}
+
+$width: 5.9px;
+
+.content{
+  // width: ceil($width);
+  // height: abs(-10px);
+  width: percentage(30 / 100);
+}
+//@function 定义函数
+@function changeWidth($width){
+  @return $width * 2
+}
+.last{
+  width: changeWidth(4);
+}
+$list: 1px solid #000;
+
+div{
+  width: changeWidth(40px);
+  border-top: $list;
+}
+section{
+  border-bottom: $list;
+}
+//列表要用逗号分割
+$colorList: red,blue,pink,green;
+
+p{
+  //nth($list,index)通过索引获取列表当中的第index项
+  color: nth($colorList,2)
+}
+
+$length: 2;
+li{
+  //@if 指令 (与js中的if效果相同)
+  //sass 中的逻辑判断 and or not
+  @if $length > 0 and $length < 3{
+    font-size: 12px;
+  } @else if $length >= 3{
+    font-size: 16px;
+  }@else{
+    font-size: 20px;
+  }
+}
+
+//through 包含3
+@for $i from 1 through 3 {
+  .list-#{$i}{
+    width: $i * 100px;
+  }
+}   
+//to 不包含3
+@for $i from 1 to 3{
+  .none-#{$i}{
+    width: $i * 100px;
+  }
+}
+//each in 循环列表
+@each $var in $colorList {
+  .content-#{$var}{
+    color: $var;
+  }
+};
+
+$a: 3;
+@while $a > 0 {
+  .h-#{$a} {
+    width: 2px * $a;
+  }
+  $a: $a - 1;
+}
+
+
+
+
+
+
+
+
+

12_sass/max.css

@@ -0,0 +1,4 @@
+body {
+  list-style: none;
+  width: 100%;
+}

12_sass/max.min.css

@@ -0,0 +1 @@
+body{list-style:none;width:100%}

12_sass/max.scss

@@ -0,0 +1,11 @@
+body{
+  list-style: none;
+  width: 100%;
+}
+$a: 8;
+@while $a > 0 {
+  .h-#{$a} {
+    width: 2px * $a;
+  }
+  $a: $a - 2;
+}