今天完成的事：

任务11总结

任务名称：css11

成果链接：https://19-c.github.io/web/css-11/css11.html

任务时间：2018.12.14-2018.12.15  耗时2天

官方脑图：

个人脑图：

任务总结：

sass使用方法：

1、Sass中的变量
使用 $变量名：变量值，声明变量；

如果变量需要在字符串中嵌套，则需使用#加大括号包裹；
border-#{$left}:10px solid blue;

2、Sass中的运算，会将单位也进行运算，使用时需注意最终单位
例：10px*10px=100px*px

3、sass中的嵌套：选择器嵌套，属性嵌套，伪类嵌套

选择器嵌套 ul{ li{} } 后代
           ul{ >li{} } 子代
&:表示上一层 div{ ul{ li{ &=="div ul li" } } }

属性嵌套：属性名与大括号之间必须有: 
例如:border:{color:red;}

伪类嵌套：ul{li{ &:hover{ "ul li:hover" } } }

4、混合宏、继承、占位符

①混合宏：声明：@mixin name($param:value){}
调用：@include name(value);
声明时，可以有参，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范。同less
优点；可以传参，不会生成同名class；
缺点：会将混合宏中的代码，copy到对应的选择器中，产生冗余代码！

②继承：声明：.class{} 调用：@extend .class;
优点：继承的相同代码，会提取到并集选择器中，减少冗余代码
缺点：无法进行传参，会在css中，生成一个同名class

③占位符：声明：&class{} 调用：@extend %class;
优点：继承相同代码，会提前到并集选择器；不会生成同名的class选择器
缺点：无法进行传参

综上所述：当需要传递参数时，用混合宏；当有现成的class时用继承；当不需要参数，也不需要class时，用占位符

5、if条件结构：
@if 条件{}
@else{}

6、for循环结构：
@for $i from 1 to 10{} 不包含10;
@for $i from 1 through 10{} 包含10;

7、while循环结构：
$j:1;
@while $j<10{
.while#{$j}{
border:#{$j}px solid red;
}
$j:$j+1;
}

8、each循环遍历
@each item in a,b,c,d{
//item表示每一项
}

9、函数：
@function func($length){
$length1:$length*5;
@return $length1;
}
调用：func(10px);
10、使用...将传进来的所有参数，接收到一个变量中
@mixin bordeRadius($param1...){
//使用...将传进来的所有参数，接收到一个变量中
border-radius:$param1;
-webkit-border-radius:$param1;
}

2-3自组合选择器和同层组合选择器：>,+和~；

上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。

明天计划的事：

继续任务

遇到的问题：

写的css框架和组件有些bug相互冲突，还有些找不到原因

收获：

如上