今天完成的事情：

完成了小课堂的深度思考，上传，提交，修改了任务10bug

重写任务11 12 完成，任务13完成了第一件页面

明天计划的事情：

 完成任务13，
遇到的问题：

  刚开始写任务13的时候，发现以前写的代码是真心多，重写了一遍感觉收益很多，对布局的理解，好多基础知识的运用有了进一步印象的加深。
任务11总结：

任务11就是利用sass/scss或者less重写任务5，首先就是less 或者sass的配置，配置有点难度，反正我是找了好多资料，最后一步实在弄不成，在师兄的帮助下完成了，

后面就是开始用scss重写代码，首先我先把以前的代码复制粘贴过来，瞬间感觉以前代码写的是真多，利用scss之后，用了新的布局方式简化了好多代码，简单来说，scss就是一款新的编辑语音，可以简化代码，优化网页。

深度思考：

第一如何使用less？

CSS的缺点

    CSS是一门典型的标记型语言，使用起来非常的简单粗暴，但是CSS并不具有很强的逻辑性，甚至说其实没什么逻辑性，并不像一门正儿八经的编程语言。一旦我们的css文件量大、嵌套深，就会导致我们维护样式变得非常的麻烦，可能修改某个地方的样式，都要去找半天。

    但是往往就是因为各种疑难杂症的问题才会引领着我们技术的发展。没错，正是因为CSS的 “落后” ,为了让我们的样式文件更具有逻辑性，于是涌现了一波非常神奇的语言——CSS预处理语言。

CSS预处理语言

    CSS预处理语言的诞生，让CSS成为了一门可以使用变量、循环、继承等多种特性的标记型语言。得以让CSS文件变得更具逻辑性，大大的增加了其可阅读性和维护性。

    目前，在我所了解的范围内，有三款预处理语言：Less、Sass、Stylus，本篇博客介绍的是其中的Less。

Less简单介绍

    Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充（引用于官网）。

Less的使用

    我们需要在页面中引入less.js文件，并且在引入JS文件之前，写上link标签，注意link标签的rel为stylesheet/less。

变量的使用

    Less的变量非常的强大，万物皆可化变量。

值变量

 定义变量使用@，在使用变量的使用同样需要加上@，在平时的开发当中，一般我们将这些变量单独的存放到一个less文件当中，便于管理：

选择器变量

    选择器变量可以让我们的选择器成为动态的。

  定义选择器变量有两种方式：

①直接跟上选择器@Selector: #box，对应使用方法：@{Selector}

②一种是只跟上名字@Content: box，对应使用方法：#@{Content}、.@{Content}等等等

第二如何使用sass?

一、安装环境

要想使用sass，先得安装ruby，不懂ruby没关系，反正只是给我们提供了环境。

我的是window系统  :   https://rubyinstaller.org/downloads/

下载完成后打开cmd命令行输入 ruby --version  如果显示版本号则表示安装成功。

接下来安装sass ，我用的方式是npm也可以用淘宝镜像cnpm  -g 是全局安装

第三less和sass有什么区别？

Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。

Sass是基于Ruby的，是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

任务耗时2天