今天完成的事情： 

1、任务11使用sass编写完成
明天计划的事情：（一定要写非常细致的内容） 

1、学习熟练sass用法，尤其混合、继承、导入scss文件的区别以及各种使用的场合。
遇到的问题：

1、 继承与混合的混淆，因为有部分样式在input1和input2需要重复使用，考虑使用某种方式简写：

开始使用继承方式，首先提前写好公用样式.icon1，然后在下面.icon使用@extend继承

.main {
  height: 14rem;
  padding-top: 0.75rem;
  background-color: $spacecolor;
  .input1{
      @include input;
      .icon{
        @extend .icon1;
        @include border-right;
      }}}

编译后为：

.main .input1 .icon .icon1{**}

而使用混合方式，提前写好公用样式@mixin icon1，然后在下面.icon使用@include继承

.main {
  height: 14rem;
  padding-top: 0.75rem;
  background-color: $spacecolor;
  .input1{
      @include input;
      .icon{
        @include icon1;
        @include border-right;
      }}}

编译后：

.main .input1 .icon{**}

两者对比可以看出混合与继承的区别，继承是对整个选择器的继承，即把类也继承过来，而混合则是引入其中的内容。

收获：

1、sass的混合

混合器

当你的工程中需要重复使用大量相同的样式时，单单使用变量是无法解决的，这时可以使用混合器（标示符为@mixin）来使用重复的样式，在调用处使用@include＋name进行调用，此时相当于把@mixin里面的样式放在@include的位置上，但是过量的使用混合器会导致样式表过大，加载缓慢，所以首先我们要了解使用场景。

--何时使用

当你发现自己在重复使用一段样式，那么就应该构建一个优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如是放在一起有意义的一组属性，对于何时使用这个问题，经验之谈就是你很容易为你的混合器起名字，因为你的混合器最好是用来实现某个具体样式的，如rounded-corners，使用语义化命名更加便于使用。

--选择器的css规则

选择器里面不仅可以包含属性，也可以包含css规则，如选择器和选择器中的属性，甚至可包含父选择器标示符&。

--混合器传参或默认

混合器传参：@include可以像javascript的函数一样进行传参，可以直接传入，也可以使用$name: value的形式，这样的话，不需要按照原参数顺序指定value

2.sass的继承

选择器继承

选择器继承是指一个选择器可以继承另一个选择器的所有样式，使用@extend＋name实现，选择器的继承不仅实现继承本身的样式，也会继承与之组成的组合选择器的样式。
--何时使用继承

一般继承建立在语义化的基础上，当一个类明显属于另一个类时，使用继承再合适不过了。

--用法

可以继承一个html元素的样式，在继承时，若@extend后面是.important.error那么只会继承这两个类下面的共有的样式，不会分别继承.important 和.error下的样式。

--细节

继承比混合器所占体积更小，会使得站点的速度更快，当使用继承发生样式冲突时，按照层叠的规则选择。

--最佳实践

不要使用后代选择器去继承，否则css选择器中的数量很快就会失控。