今天完成的事情：

1.完成任务12页面2的sass编写。加强了对sass用法的运用。

明天计划的事情： 

1.回顾sass的用法，理解导入、嵌套、混合、继承等使用的场合。

遇到的问题： 

1.本任务基本是在任务5/6的CSS基础上改写的，使用了sass编写，经过编译css，完成页面。原页面如果没问题的话，整体难度不大，主要是sass几种规则的使用，如何达到简化以及优化代码的目的。

本任务使用的嵌套比较多，最多达到6层，就和html的dom结构相对应，按照一般的sass嵌套用法建议，一般不超过三层：

注意：嵌套不是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深。

选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 
选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

所以如何合理的使用嵌套还需要好好深入理解。

2、在写li.details1时，在元素li 与类.details之前多了一个空格，变成li .details1，导致css样式不起作用。

这里.details1并不是li的子类，所以同级元素与及相应的类名连写千万不能加空格，否则就是代表其子元素的意思了。

<li class="details1">

li.details1 i {
      background-position: 0 0;
    }
li.details1 .service {
      font-size: $fontSize + 0.25rem;
      color: $dark-color;
      margin-left: 0.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

收获：

1.混合器确实是个好功能，尤其传参作用，开始本来写的是把同样的部分写一个mixin，到时候调用，在把不一样的部分在具体的类里调用mixin后再补充。后来想到传参功能，就在mixin里一起写了，设置好相应变量，结束引用把对应的变量直接带上即可，这样就省事多了。

@mixin button ($width,$height,$color){
  width: $width;
  height: $height;
  outline: none;
  border: none;
  line-height: 120px;
  font-size: 1.8rem;
  padding: 0;
  color: $color;
}

调用：

@include button(46px,60px,$blue-color);

2.关于混合宏、继承、占位符的使用时机，还需要好好体验使用：

什么时候调用混合宏，什么时候调用继承，什么时候使用占位符？

• ----混合宏的使用：
  

不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码冗余，但它可以传参数，较为灵活。

建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

-----继承的使用：

使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起变为组合选择器。编译后的代码相对于混合宏来说要干净整洁，但是它不能传变量参数。

建议：若代码块不需传任何变量参数，且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

-----占位符的使用：

编译后的 CSS 代码和使用继承基本相同，占位符和继承的主要区别是：

占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；

继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。