今天完成的事情：

完成任务13，利用sass的特性，设置共用样式，如头部，然后@import引用；以及嵌套，继承，省了大量代码量。

侧滑导航栏，以前用的display：none实现出现消失，这次使用了师兄说的：checked，来让列表宽度从0到xxpx来变化，设置transtion：“x”s，来做缓慢侧滑。

把主体内容和列表放一个大盒子里，利用flex布局，设置flex-shrink：0来使两个内容不收缩

利用sass@for循环来写bootstrap框架。

明天计划的事情：

开始任务14-15，分离样式，头部，尾部设置单独css，主体单独css，设置公共样式库。

遇到的问题

sass中的，媒体查询继承占位符%问题：

按照正常逻辑是：

%icon {  transition: background-color ease .2s;  margin: 0 .5em;}

@media screen { 

     .info-icon {    @extend %icon;  }

}

但是会报错：

This will actually result in a compile error:

You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive. From "@extend %icon" on line 8 of icons.scss

正确格式为

@media screen { 

%icon {    transition: background-color ease .2s;    margin: 0 .5em;  }

}

.info-icon {  @extend %icon;}

会输出：

@media screen { 

   .info-icon { 

     transition: background-color ease .2s;    margin: 0 .5em;  }

}

收获：

使用../来链接同级文件

如何在sass中正确在媒体查询中使用占位符%。

侧滑导航栏如何制作。flex属性  grow，shrink，basis的合理运用

for循环

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译出来的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}