今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

1、完成了less插件在编辑器里的下载。

2、完成了任务11 less预先处理器样式的编写。

      当看完sass和lass之后，决定选择sass来编写，然后通过百度下载ruby这个插件，然后恁是没有整明白，在这上面高了半天，后面问了师兄，说只需要在vscode里下一个插件easy sass就可以了，但是在使用的过程中，出现了无内容的错误提示，后面发现是html的后缀名错了，写的是.sass这种是错误的，正确的写法是.scss的后缀名，在写css样式才能重新编译，后面发现less和sass的区别不大，less要更加简洁点，写法上和写css是一样的，只不过通过less重新编译了css的代码，使代码更好阅读和维护，也减少了代码的书写。

      任务11只是学习了解less预处理器框架，用它来重新编写前面的任务，这次写起来相比较之前真的是很快，用flex弹性盒子布局来写头部和主体写起来很流畅，最后的footer我用了flex和绝对定位来写的。

     首先第一步还是先把html的框架写出来。

     然后第二步再在less里写css样式。

写这个任务主要是less的嵌套，然后熟悉less预处理器的基本使用。

明天计划的事情：（一定要写非常细致的内容） 

明天家里有事请假一天，

完成任务11的提交通过。

遇到的问题：（遇到什么困难，怎么解决的） 

用less写任务11其实很快就能写出来，这用的是less的嵌套，着重去了解了下less的嵌套，其实写起来并不费力，最后就出现了这个问题，在小于540px以下，越缩小input框就会挤出来产生间距，后面发现问题是因为没有给input设width，设width：100%就解决这个问题了。

收获：（通过今天的学习，学到了什么知识）

1、less和sass的插件下载和使用。

2、less的嵌套使用，在less里编写css样式重新编译成普通的css然后通过link引入，通过一个选择器嵌套另一个选择器的方法简化代码，样式的关系一目了然。

任务总结：

任务名称：CSS-task11

成果链接：https://guilinxi.github.io/GUI/task11/task11.html

任务耗时：本次任务从18.12.29-19.1.2 共耗时2天，请假3天。

官方脑图：

个人脑图：

任务总结：

任务11基本上是重构以前的页面，只是通过less或者sass的插件来完成，他们只是一个工具，熟悉这个工具就可以了。

这个任务中我使用的几个功能，就是嵌套规则、变量名、mixin混入和@import导入。

第一次使用嵌套规则的时候发现就有点像是前面做任务8.9时很难理解的权重，但是理解了之后就很好懂了，这个嵌套规则可以很明确的看到父级和子级之间的关系。

然后是变量，一般变量只是用来标记的，工具使用的不同，变量名就不一样，less是用@命名，sass是$命名。可以用变量名来引入进元素的属性里，例如这里我设一个color的变量名@yellow：xxx，然后在要设置颜色的属性中用变量名引入就行了。如：color：@yellow。这样也方便在后期的代码维护修改。

@import其实可以和变量名一起来理解，变量名是在less文件里来写的。import就需要重新单独设置一个.less的文件，然后通过@import来导入进来，把所有的color放进一个.less文件中，也是方便后期的修改。师兄讲过团队意识这个很重要。

mixin这个也比较好理解，像有些重复的样式，可以用类选择器或者id选择器来写出公共样式，然后再通过mixin来引入。如：

     通过这个在写进对应的类名元素里。

     基本上使用的就是这四个，熟悉工具后面任务12写起来还是比较简单的。