今天完成的事情：

       在重构任务中，有一个要求 使用SASS或LESS重构页面 ，在这个地方卡住我了，以前没有了解过ASAA和LESS，在师兄推荐下，sass优于LESS,于是便在今天了解和学习SASS。并且对任务十二进行重构和完善。

明天计划的事情：

       了解SASS之后，熟练掌握和使用它，并同SASS完成任务十二的重构要求。

   遇到的问题：

     任务要求使用SASS来完成重构，但是SASS到底是什么呢？

Sass是一个将脚本解析成CSS的一种脚本语言即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个区分开。

在介绍上面可以理解为SASS是一种脚本语言，其作用是为了完成代码规范，在区分和改善类名时会起到不一样的作用，在HTML文档中可以优化类名的语法。

在CSS框架中Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

变量可以用作函数的参数或返回值。在解释过程中，解释器会把变量的值写入最终的CSS文件中。

CSS虽然支持嵌套但是不支持代码块的嵌套，而SCSS支持。这样可更加清晰地表示元素之间的关系。

 所以在任务要求重构中使用sass或者less是为了代码更加规范和美观。

而在今天的任务进度中发现了以前由于代码不熟练所引发的问题：

当时这个要求是按钮在中间，然后位置图标在右边，我当时的处理方式是用《display：flex》来进行定位，由于只有 两个DIV然后我额外加了一张图进去，然后把图片单位设置成1PX来进行隐藏，用这种蒙混的方法过关，但是在今天重构的时候发现，在页面缩放到一定的程度的试试，我额外加进去的那张图片没有把另外两个记住，所以这个表头蹦了，

  然后在今天重构的时候，我决定重写表头，

  一样是使用《display：flex》代码来为按钮进行水平垂直定位

display:flex;justify-content:center;align-items:center;

《display：flex》大概是水平垂直定位所需代码最少的，比如:

        利用vertical-align,text-align,inline-block实现

.parent{display:table-cell; vertical-align:middle; text-align:center;}.child{display:inline-block;}

        利用绝对定位实现

.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

 后面这两种定位方法，在代码量上面都超过了《display：flex》定位。

  在进行水平垂直定位之后，把右边的小图标进行绝对定位，让他脱离文档流，这样就不会影响按钮在文档中的绝对居中性质。

收获：

学习并使用SASS，在重构任务中，对基础代码有了新的理解，加深了对定位和布局的熟练。