less预处理语言

1.less的概述
less的源码采用的javaScript，less框架诞生于2009年，使用javascript语言编写的一种css预处理语言，他为css赋予了编程的特性如变量/继承/运算/函数等功能。  
  

##2.less的使用
>1.使用变量  
使用@定义一个变量，在其他的css样式中引用  

    @color:red;//
    #header{
      height: 200px;
      width: 200px;
      background-color: @color;
    }
    p{
      color: @color;
    }
    @number:100px;
    加法，注意：使用减法会报错，+-10px即可
    .first{
      background-color: red;
      width: @number+100px;
      height: @number+100px;
    }
    
    乘法
    @number:100px;
    .first{
      background-color: red;
      width: @number*4;
      height: @number*4;
    }
>2.混合/混入  
>混合/混入
是定义可以重复使用的代码块  
    .set-init(@color:red,@size:10px){
        background-color: @color;
        font-size: @size;
    }
    
    #header{
      height: 200px;
      width: 200px;
      .set-init
    }
    p{
      .set-init
    }  

>3.内嵌  
  
    #header{
      div{
        height: @min-div-height;
        width: @min-div_width;
        background-color: @color;
     ul li{
        float: left;
        list-style: none;
        margin-left: @min-margin;
        margin-right: @min-margin;
      }#header{
  div{
    height: @min-div-height;
    width: @min-div_width;
    background-color: @color;
 ul li{
    float: left;
    list-style: none;
    margin-left: @min-margin;
    margin-right: @min-margin;
  }
  }
 
  p{
    color: @color;
  }
}
#header{
  div{
    height: @min-div-height;
    width: @min-div_width;
    background-color: @color;
 ul li{
    float: left;
    list-style: none;
    margin-left: @min-margin;
    margin-right: @min-margin;
  }
  }
 
  p{
    color: @color;
  }
}

      }
     
      p{
        color: @color;
      }
    }