2018/11/8

今日完成

学习了sass的混合器@mixin的用法，对变量、选择器嵌套、属性嵌套有了更好的理解。用sass重构了任务五六的代码，完成任务五六的布局，并提升了之前的任务代码质量。

认识了父选择器标识符&， &是直接替换父选择器，如：

article a {

  color: blue;

  &:hover { color: red }

}

编译后

article a { color: blue }

article a:hover { color: red } //这里&直接替换了父选择器article a，指a链接会得到color red这条规则。

如果：hover没加父选择器标识符，编译后与上面是不一样的含义

article a {

  color: blue;

  &:hover { color: red }

}

article a { color: blue }

article a :hover { color: red }// :hover前面有空格，意思是后代选择器，指article a ，a链接内的所有子元素在被hover都会得到color red这条规则。

父选择器标识符还可以在父选择器之前添加选择器。

2、学习了混合器@mixin：

混合器是将一组重复使用的属性，写成在一起，例如background-color、font-size、border等属性经常重复用到，就可以把它们取个展示性可描述的名字，判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。

用 @mixin name {  }定义，@include name 引用。

混合器的传参很好用，参数就是可以赋值给css属性值的变量，当使用到同一组相同的属性时，但是属性值不同，可以使用带参数的混合器，引用时给它们赋值。如

@mixin sprite-img($width,$height,$bck-position){
  width: $width;
  height:$height;
  background-position: $bck-position;
}

.my-btn{
  @include sprite-img(0.48rem,0.41rem,  -1.72rem 0);
}

编译后如下：

.my-btn {
  width: 0.48rem;
  height: 0.41rem;
  background-position: -1.72rem 0;
}

3、用sass重构任务五、六的代码，对sass的应用理解的更加深透，重新修改代码后也发现之前写的任务代码挺多不合适不够简洁的地方，如代码多写了、没有清除浮动、absolution定位父元素没有设置relative，之前全部布局都采用div+浮动布局，其实可以用ul li布局更加方便也不易出错。代码行数较之前减少了，初步体验到了sass的方便快速。

今日收获：如上

遇到的问题：暂无

明日计划：查看自己写的代码，看看还能不能继续优化，学习代码规范，学习任务后面的深度思考。学习sass的继承功能，并思考在哪些地方使用。