一、今天完成的任务：

 1，因为这边师兄们都是学得less，所以为了方便交流也就自然而然的学了less，并且使用less重写了任务四的代码。（sass只是稍微了解了下，感觉大同小异，基本上差不多）

二、遇到的问题：

 1，了解less：

    刚开始的时候，自己查资料看less，什么是less，less是用来干嘛的。如何使用？查了N多资料，就是没有搞懂，比如说菜鸟教程里的boostrap里的less说什么要去官网去下载less文件，然后去引用它，新手学习less的时候肯定看到这就会以为less原来也是一个库啊，只需要下载下来再引用就好了。打住~~~已经错的很离谱了。

我个人理解：less是为了维护方便，便于修改，从而编写的一个的文件。而html文档中并不一定非要引用less文件，当然了，如果你能记住你写的less文件中都是有什么，你可以弄个自己的less库，类似于菜鸟教程boostrap里的让你下载less库。不建议使用boostrap里的less库，原因：毕竟不是自己的，你不熟悉里面的内容，难道你要为了使用这个库，从而去把整个库背下来吗？答案肯定是不可能的。所以只有自己熟练的写less文件，然后才能慢慢建立属于自己的库。那么问题来了，在没有自己的库之前，如何使用less呢？很简单，使用工具把你写的less文件编译成css文件，那么又会有人问了，既然还要编译成css文件，还写什么less文件啊，多浪费时间~ 为什么要写less原因在刚开始就已经说了：是为了便于维护，以及修改。刚开始使用less虽然可能写的代码行数比你写CSS还要多，但是至少现在修改是比较方便的，当你有了一个自己的less库的时候，你就可以直接引用你的less库，这个时候你就会惊奇的发现，你的less文件会非常的简洁。好了，说了这么多，该说说less编译为CSS的编译工具了，官方以及我个人推荐使用“koala（考拉）”除了使用编译器外，还有其他的方法吗？这个是肯定有的，但是刚开始学习还是建议使用编译工具。如果你看了两三个小时还是不懂怎么使用，没关系，你可以百度：慕课网。讲的很详细。我也是看了很多资料还是不懂怎么使用，通过雪峰师兄的介绍，果然前辈出高人啊，一点就通，比我自己查了两三小时的无用资料强多了。

三、收获：

 1，less最主要的五个知识点：

   1）变量（基本上都是一些比较常用的值比如：px、rem、%、颜色等）使用方法如下：

    先设置变量：(//为less里的注释)

     @test-width：100px；  //@后面的名字可以随便写，自己觉得怎么能更好的记住就怎么写。

   然后引用自己写的变量：

     .body{

        width:@test-width;  //经过编译过之后就会显示width：100px；

      }

   2）混合：

     如果说我们的另外一个类rag同样用到了width：100；我们就可以如下混合编写：

     .rag{

        .body

      }

     经过编译成css文件之后就会显示.rag{ width:100px; }  //因为.body里有什么属性，就会在.rag里显示什么属性，body里有的，rag里都会有。

   3）匹配模式：

     这个匹配模式跟混合有点类似，比如说我们要使用三定位属性

      .pos（r){

          position:relative;

      }

      .pos（f){

          position:fixed;   //.pos(f)也是自己怎么方便记住里面的内容，怎么编写。

      }

      .pos（a){

          position:absolute;

      }

    然后当自己要使用固定定位fixed时只需要编写以下属性就可以了：

    .rag{

      .pos(f);

    }            //经过编译之后就会显示.rag{ position：fixed; }

    4)运算：

    这个算是里面最好理解的一个，运算方式（- + * /）

    比如说还是@test-width：100px;这个变量，但是我们在一个类buy里想使用这个变量，但是只想要80px值怎么办，这就用到了运算，如下编写：

    .buy{

       width：@test-width - 20;  //需要注意的是，运算符号和名字以及变量（例：20）用空格隔开，否则是不会进行编译的。

    } 

//经过编译之后就会显示width：80px； 为了什么减去的值不用带单位呢，因为前面的@test-width是带有px单位的两者有一个带单位就可以了。

    5）嵌套规则：

    比如这段html文档代码

      <div>

        <a>

          <span>

            <button>

            </button>

          </span>

        </a>

      </div>

    一般我们写CSS文件就会写成:

      .div{}

      .div a{}

      .div span{}

      .div button{}

   而在less文件中只需要写：

      .div{

         .a{

          }

         .span{             

          }

         .button{

          } 

      }

//经过编译之后就会如CSS文件写成的那样，为了方便浏览器的加载，最好写成此种less形式。当然了也可以写成如下形式：

      .div{

         .a{

         .span{             

         .button{

            }

          }         

        } 

      }

//经过编译之后就会变成：

    .div{}

    .div a {}

    .div a span{}

    .div a span button{}

这种方式是不方便浏览器的加载的。

四、明天的计划：

  使用less编写，并且在不使用boostrap的情况下重构任务5和任务6。

附加任务11的成果展示：https://fan911025.github.io/ptteng-task/task11/task4.html