今日完成：

今天的头比较疼，完成的不多，在之前任务七的基础上进行了重构，加了很多混合器。

这是根据日常使用情况做的两种混合器，一个是采用css3transform：scale（）；动画效果中的缩放实现的小型图标ico的混合器，css3transform动画缩放的特点就是在雪碧图的应用中，这种缩放是不会改变图片大小的，相当于你用background-img显示图片后，再缩小屏幕可视，实际大小未变，其周围元素不会随着缩小拉近距离，这种适合于小型ico，大型图片缩小后产生的空白区域过大，不适合用这种方法，这时就使用第二个混合器所示的background-size，这种缩放会先改变图片大小，在运用到页面中，所以不适用于雪碧图，因为随着图片放大缩小，相应图标的位置也会随着改变。

@mixin module-ico($width,$height,$margin,$image,$position,$transform) {
  width: $width;
  height: $height;
  margin: $margin;
  background-image: $image;
  background-position: $position;
  -webkit-transform: scale($transform);
  -moz-transform: scale($transform);
  -ms-transform: scale($transform);
  -o-transform: scale($transform);
  transform: scale($transform);
}
@mixin module-ico-size($width,$height,$margin,$image,$size) {
  width: $width;
  height: $height;
  margin: $margin;
  background-image: $image;
  -webkit-background-size: $size;
  background-size: $size;
}

还有一个混合器就是flex弹性布局平时写代码时，弹性布局适用属性一般比较固定，所以重复率比较高，所以这里做成了相应的混合器

@mixin module-dflex($flex-direction,$justify-content,$align-items) {
  display: flex;
  flex-direction: $flex-direction;
  justify-content: $justify-content;
  align-items: $align-items;
}

明日计划：

完成任务十三关于弹出式菜单部分，相应的实现方法已经知道了，实现一下就好了，然后一边做十四十五一边把深度思考都看一遍。