Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

一.安装

    全局安装：cnpm install -g less

    局部安装：cnpm install --save-dev less

你的目标文件出现下图所示代表安装成功：

二.编译less

1.命令行编译

      lessc  文件.less  文件.css

创建一个index.less文件

在控制台中输入口令

编译完成后会自动生成一个名为index.css的文件

2.考拉软件    /同步编译    http://koala-app.com/index-zh.html

3.Webstorm    配置自动编译less

4.js脚本编译    适用于后端

5.gulp也能帮我们编译

---

三.less使用

1.变量（Variables）

@color：#f8f8f8;

.box{

    width:100px;

    height:100px;

    background:@color;

}

考拉自动编译为：

.box {

  width: 100px;

  height: 100px;

  background: #ff00ff;

}

2.混合（Mixins）

.sizebox(@width:200px,@height:100px){

    width:@width;

    height:@height;

    backdround:pink;

}

.box1{

    .sizebox(100px,100px);

}

.box2{

    .sizebox(100px,100px)

}

3.嵌套（Nesting）

.container{

  @container-width:100px;  //变量法

  width:@container-width;

  height:50px;

      .header{

        width: 100px;

        height: 100%;

        background: skyblue;

            .nav{

              text-align: center;

              ul{

                    li{

                      ist-style: none;

                       a{

                        color: white;

                        display:block;

                        &:hover{

                              color: blue;

                        }

                     }

                }

           }

    }

  }

}

4.运算（Operations）

   1)加减乘除

      .box3{

        width: 100px / 2;

        height: 100px * 2;

        font-size: 15px + 5px;

        font-weight: 800 - 100;

        color: #222 * 3;

      }

2)函数

//自动计算rem

.boxrem(@value){

  width:@value / 50rem;

}

.box{

  .boxrem(67);    //1.34erm

  height: max(10px,20px,30px);     // 30

}

3）引导(判断)

      .num(@value) when(@value < 100){

        color: red;

      }

      .num(@value) when(@value >= 100){

        color:green;

      }

      .box6{

        .num(99);

      }

4）继承

      .box7{

        color: red;

        background: green;

      }

      .box8{

        &:extend(.box7);

        width: 100px;

      }