今天完成的事情：

1.首先调整任务四的界面，这个任务开始做的时候并不是特别严格按照UI图。所以这里调整了一些内外边距使之更加清晰。

2.学习sass。并尝试优化代码。

3.调整内容有：

①字体大小。

②底部按钮与上面输入框的间距。

③将css里所有em改成了rem，因为em会继承font-size的大小，之前发现字体大小不对就是这个原因。rem是按照根元素的字体大小，更方便计算。

明天计划的事情：

1.继续推进任务。加深对sass的应用理解。干巴得。

遇到的问题：

1.安装sass倒是没什么问题。开始不是很理解sass是什么东西，看了很久了解了一些，简单来说就是个效率工具，能大大提升写代码的效率，并使写出的代码更具优雅。

2.看着代码愣了很久，不知道从哪下手宰，看着好像没问题但又好像有问题。可能是这个任务代码量不多的原因。

收获：

1.了解到一些sass的使用。

①注释。/* */ 普通注释依然能使用，这样写出的注释在scss和css上都能看到。

有时候我并不希望写出的注释在网页上体现出来，但自己也想要看到，怎么办呢。新建scss文件，它会自动编译出css文件，在scss文件上使用  //注释内容   这样写出来的注释就不会在css文件上显示。

但出现一个问题，使用中文注释会提示错误。

解决方法：在scss文件上方添加

@charset "utf-8";

然后正常。

2.继承器@extend

当使用很多重复样式时，可以用继承器定义出这些样式，然后后面直接使用新定义的值即可。

3.for循环

直接举例，我写了一下scss试试效果：

@for $i from 1 to 6 {
    .box-#{$i}{
        background-color: #1D7AD9;
    }
}

css展现效果如下：

.box-1 {
  background-color: #1D7AD9; }

.box-2 {
  background-color: #1D7AD9; }

.box-3 {
  background-color: #1D7AD9; }

.box-4 {
  background-color: #1D7AD9; }

.box-5 {
  background-color: #1D7AD9; }

即，我定义box-数字，for循环5次后，css就会自动解析出box1-5的全部代码。啊，真方便。

3.明日上手开始优化。