成果链接：https://qumra.github.io/task-css/task12/task12-1.html

任务耗时： 9.17  1天

官方脑图

个人脑图

任务总结：这个任务的基础知识已通过上一个任务学习过了，这个任务主要在于增加对sass使用的的熟练度。因为之前布局已经做过了，只是改写了sass了，一天搞定。

今天完成的事情：今天早上看了一些关于闭包的知识，下午看了less的教程，下载了koala,以后用它编译less,sass文件就方便多啦！
明天计划的事情：明天继续拆分组件
遇到的问题：感觉今天心态不好，有些烦躁‘，less的教程看的半知半解的，与sass不同的地方不太会应用。明天继续看看文档。
收获：less的简单教程：

1.变量： 

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。

//申明

@c-orange:#ff6600;

@f18:font-size:18px;

//调用

.class{

    background-color: @c-orange;

    border:1px solid @c-orange;

    font-size:@font-size;

}

2.嵌套 

LESS 可以让我们以嵌套的方式编写层叠样式。

.class{

    font-family:"microsoft yahei";

    .btn{

        display:inline-block;

        text-align: center;

        padding:@p15;

        border-bottom:@border+2 solid @c-white;

        background-color:@c-orange+#111;

        color:@c-white;

        //如果你想写串联选择器，而不是写后代选择器，就可以用到"&"了

        &.confirm{

            color:red;

            background:#ddd;

        }

        &:hover{

            color:#fff;

            background:#666;

        }

}

3.混合： 

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

3.1 单参数混合

//申明

.classA(@radius:5px){

    border-radius:@radius;

    -webkit-border-radius:@radius;

    -moz-border-radius:@radius;

}

//调用

.classB{

    font-size:18px;

    //默认5px

    .classA;

}

.classC{

    //传参数 10px

    .classA(10px);

}

3.1 多参数混合（@arguments变量）

//申明

.box-shadow(@x:0,@y:0,@z:6px,@color:rgba(0,0,0,.6)){

    -webkit-box-shadow: @arguments;

    -moz-box-shadow: @arguments;

    box-shadow: @arguments;

}

//调用

.class{

    .box-shadow(0,1px,8px);

}

4.命名空间： 

简而言之，将参考容器内元素的样式属性进行封装，并灵活调用。

.div1{

    .btn1{

        display:inline-block;

        text-align:center;

        padding:2px 10px;

        background-color:#ff6600;

        color:#fff;

        font-size:15px;

        margin-top:10px;

        &:hover{

            background-color:#999;

            color:#666;

        }

    }

}

.div2{

    .btn2{

        //调用(copy)div1内的btn1的样式

        .div1 > .btn1;

    }

}

5.运算：

@c-orange:#ff6600;

@c-white:#fff;

@width:300px;

.containner{

    background-color:@c-orange;

    color:@c-white;

    width:@width;

    padding:20px;

    text-align: left;

    .content{

        //颜色运算

        background-color:lighten(@c-orange,30%);

        border:4px solid @c-orange + #333;

        //尺寸运算

        width:@width/2;

        height:@width/4;

        line-height:@width/4;

        margin:0 auto;

    }

}

6.作用域： 

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。

@var: red;

#page {

  @var: white;

  #header {

    color: @var; // white

  }

}

#footer {

  color: @var; // red  

}

7.javascript表达式: 

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号(英文键盘状态下tab上面的那个按键)的方式使用。

@str:`"china".toUpperCase() + '!'`;

.msg:before{

    content:@str; //CHINA!

    height:35px;

    width:100px;

}

8.字符串插值: 

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构。

@base-url: "https://ss0.bdstatic.com";

.msg{

    width:271px;

    height:130px;

    //注意别漏加‘{}’号

    background:#fff url("@{base-url}/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png") center no-repeat;

    background-size: 100% 100%;

}

觉得less和sass还是有些相同的地方，但是觉得less多了些复杂的函数。