今天完成的事情：

1.推进任务十一，使用sass调整任务五六的代码。

2.优化图标大小、字体大小、内外间距，使之和UI图一致。

明天计划的事情：

1.继续使用sass重构代码。

2.开始看和js相关的基础。

遇到的问题：

1.sass是一个效率工具，不过在代码量比较少的情况下我感觉优势不是特别明显。

2.注意

@include

@mixin 

前面是@符号。今天写的时候没有注意。

收获：

1.使用了@mixin定义一大块代码块，之后就能减少很多重复操作。

@mixin display {
    display: -webkit-flex;
    display: flex;
}

写成如下，后面出现相同样式可以直接用这一行代码。

@include display;

还有嵌套写法

footer .submit {
   background-color: #68CDD5;
   width: 100%;
   height: 5rem;
   border: none;
   outline: none;
   color: #fff;
   font-size: 1.8rem;
   margin-top: 3.5rem; }
 footer .forget {
   float: right;
   font-size: 1.5rem;
   margin: 1rem;
   color: #5FC0CD;
   text-decoration: none; }

写成

footer {
     .submit {
     background-color: #68CDD5;
     width: 100%;
     height: 5rem;
     @include border;
     color: #fff;
     font-size: 1.8rem;
     margin-top: 3.5rem;
     }
     .forget {
     float: right;
     font-size: 1.5rem;
     margin: 1rem;
     color: #5FC0CD;
     text-decoration: none;
     }
 }

引用父元素写法如下：

input::-webkit-input-placeholder {
   color: #e1e5e7; }
 input::-moz-placeholder {
   color: #e1e5e7;
   /* Mozilla Firefox 19+ */ }
 input:-moz-placeholder {
   color: #e1e5e7;
   /* Mozilla Firefox 4 to 18 */ }
 input:-ms-input-placeholder {
   color: #e1e5e7;
   /* Internet Explorer 10-11 */ }

input{
     &::-webkit-input-placeholder {
     color:#e1e5e7;
     }
     &::-moz-placeholder{
     color:#e1e5e7;/* Mozilla Firefox 19+ */
     }
     &:-moz-placeholder{
         color:#e1e5e7; /* Mozilla Firefox 4 to 18 */
     }
     &:-ms-input-placeholder{
         color:#e1e5e7;  /* Internet Explorer 10-11 */
     }
 }

&可以直接引用父元素

还可以指定参数和默认数值

@mixin w-h($w:0,$h:0) {
  width: $w;
  height: $h;
}

比如此处用@mixin，指定宽高$w,$h默认为0，使用时可以加入参数。如：

@include w-h(7.7rem,3.5rem);

意为宽度7.7rem，高度3.5rem。